redux

为什么在Redux中我们需要中间件来实现异步流？

由 99封情书 提交于 2020-08-06 03:55:11
问题： According to the docs, "Without middleware, Redux store only supports synchronous data flow" . 根据文档， “没有中间件，Redux存储仅支持同步数据流” 。 I don't understand why this is the case. 我不明白为什么会这样。 Why can't the container component call the async API, and then dispatch the actions? 为什么容器组件不能调用异步API，然后 dispatch 操作？ For example, imagine a simple UI: a field and a button. 例如，想象一个简单的UI：一个字段和一个按钮。 When user pushes the button, the field gets populated with data from a remote server. 当用户按下按钮时，该字段将填充来自远程服务器的数据。 import * as React from 'react'; import * as Redux from 'redux'; import { Provider, connect } from 'react

设计模式第二弹: 不知道怎么提高代码复用性？看看这几种设计模式吧！

由 烈酒焚心 提交于 2020-08-05 05:16:07
本文是设计模式的第二篇文章，第一篇文章是 不知道怎么封装代码？看看这几种设计模式吧！ ，后面还会有 提高扩展性 ， 提高代码质量 的设计模式，点个关注不迷路，哈哈~ 想必大家都听说过 DRY 原则，其实就是 Don't repeat yourself(不要重复你自己) ，意思就是不要重复写一样的代码，换句话说就是要提高代码的复用性。那什么样的代码才算有好的复用性呢？ 对象可以重复利用。这个其实有点像我们关系型数据库的设计原则，数据表和关系表是分开的，数据表就是单纯的数据，没有跟其他表的关系，也没有业务逻辑，关系表才是存储具体的对应关系。当我们需要某个数据时，直接读这个表就行，而不用担心这个表会有其他的业务在里面。类似设计的还有redux，redux的store里面就是单纯的数据，并不对应具体的业务逻辑，业务如果需要改变数据需要发action才行。正是因为这种数据很单纯，所以我们需要的地方都可以拿来用，复用性非常高。所以我们设计数据或对象时，也要尽量让他可以复用。 重复代码少。如果你写的代码重复度很高的话，说明你代码的抽象度不够。很多时候我们重复代码的产生都是因为我们可能需要写一个跟已经存在的功能类似的功能，于是我们就把之前的代码拷贝过来，把其中两行代码改了完事。这样做虽然功能实现了，但是却制造了大量重复代码，本文要讲的几种设计模式就是用来解决这个问题的，提高代码的抽象度

react+taro-JYwebApp模板集成方案项目搭建【1】

由 a 夏天 提交于 2020-08-05 02:42:49
本章节： 讲述基于react +taro-JYwebApp，项目的基础搭建。本主题讲述了react+taro-JYwebApp 、webapp模板- 集成方案，从零到一的手写搭建全过程。 该项目不仅是一个持续完善、高效简洁的webapp模板，还是一套企业级webapp开发集成方案，致力于打造一个与时俱进、高效易懂、高复用、易维护扩展的应用方案。 项目开始搭建时间：2020-06-11 环境准备 1、安装 tarojs/cli cnpm install -g @tarojs/cli 2、初始化项目 taro init myApp 3、项目运行 npm run dev:h5 npm run dev:weapp 4、浏览器兼容性（IE 11测试） IE11不支持 5、 使用redux cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger 6、配置@ store的结构 store/index.js import { createStore, applyMiddleware } from ' redux ' import thunkMiddleware from ' redux-thunk ' import { createLogger } from ' redux-logger '

How to use useEffect hook properly with array dependency. I passed state from redux store and still my component renders infinitely

由 可紊 提交于 2020-08-02 21:12:59
问题 I am using useEffect hook and getting a list of users data with fetch call using function getStoreUsers which dispatches an action on response and stores shopUsers (which is an array) inside the redux store. In array dependency, I am writing [shopUsers] . I don't know why it is causing infinite rendering. Here is how I am using useEffect hook: useEffect(() => { const { getStoreUsers, shopUsers } = props; setLoading(true); getStoreUsers().then(() => { setLoading(false); }).catch(() => {

How to use useEffect hook properly with array dependency. I passed state from redux store and still my component renders infinitely

由 陌路散爱 提交于 2020-08-02 21:10:44
问题 I am using useEffect hook and getting a list of users data with fetch call using function getStoreUsers which dispatches an action on response and stores shopUsers (which is an array) inside the redux store. In array dependency, I am writing [shopUsers] . I don't know why it is causing infinite rendering. Here is how I am using useEffect hook: useEffect(() => { const { getStoreUsers, shopUsers } = props; setLoading(true); getStoreUsers().then(() => { setLoading(false); }).catch(() => {

Next.js: Reduce data fetching and share data between pages

由 情到浓时终转凉″ 提交于 2020-08-02 01:01:06
问题 I'm looking for solutions for better data fetching in a Next.js app. In this question I'm not just looking for a solution, I'm looking for multiple options so we can look at the pros and cons. The problem I have Right now I have a few pages that all include a component that displays som static content and a that have some dynamic content that is fetched from an API. Each page do a fetch() in their getInitialProps() to get their own page data, but also the footer data, which is the same for

Next.js: Reduce data fetching and share data between pages

由 大憨熊 提交于 2020-08-02 01:00:10
问题 I'm looking for solutions for better data fetching in a Next.js app. In this question I'm not just looking for a solution, I'm looking for multiple options so we can look at the pros and cons. The problem I have Right now I have a few pages that all include a component that displays som static content and a that have some dynamic content that is fetched from an API. Each page do a fetch() in their getInitialProps() to get their own page data, but also the footer data, which is the same for

Wait for a redux action to finish dispatching

由 爷，独闯天下 提交于 2020-08-01 09:26:24
问题 I have the following action creator: export function scrolltoNextItem(item) { return (dispatch, getState) => { dispatch(appendItem(Item)); dispatch( scrollToNextIndex( getState().items.length - 1 ) ) } } Problem is that scrollToNextItem runs before appendItem has finished and the scroll position ends up being incorrect. I can prove this is the case by adding a setTimeout to make the execution of the script wait for the next tick before running scrollToNextItem : export function

Wait for a redux action to finish dispatching

由 五迷三道 提交于 2020-08-01 09:25:10
问题 I have the following action creator: export function scrolltoNextItem(item) { return (dispatch, getState) => { dispatch(appendItem(Item)); dispatch( scrollToNextIndex( getState().items.length - 1 ) ) } } Problem is that scrollToNextItem runs before appendItem has finished and the scroll position ends up being incorrect. I can prove this is the case by adding a setTimeout to make the execution of the script wait for the next tick before running scrollToNextItem : export function

Using react redux with next.js

由 坚强是说给别人听的谎言 提交于 2020-08-01 06:21:12
问题 I try to use Redux with next.js starter project and I installed next-redux-wrapper on to the project but I'm not sure where is the root file in this project. I try to follow the tutorial which shown on the next-redux-wrapper but no success. Nothing change. Please help me how to add Redux on to the project. Regards. 回答1: Next.js uses the App component to initialize pages. You can override it and control the page initialization. Although this demo is for next.js it should work for nextjs
订阅 redux