Redux相关个人整理

用户2144475662868
132 阅读3分钟

Redux

store

  1. 应用中所有的state 都以一个对象树的形式储存在一个单一的 store 中
  2. 改变内部 state 惟一方法是 dispatch 一个 action store.dispatch({ type: 'INCREMENT', payload: '' });
  3. 默认情况下，createStore() 所创建的 Redux store 没有使用 middleware，所以只支持 同步数据流
  4. 你可以使用 applyMiddleware() 来增强 createStore()。 像 redux-thunk 或 redux-promise 这样支持异步的 middleware 都包装了 store 的 dispatch() 方法，以此来让你dispatch 一些除了 action 以外的其他内容，例如：函数或者 Promise。
import thunk from "redux-thunk";
const store = createStore(persistedReducer, applyMiddleware(thunk));

action

  1. Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源; 本质上是 JavaScript 普通对象
  2. 我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量
  3. action 对象的结构完全由你自己决定; 建议有type和payload两个属性就行了

reducer

  1. reducer，形式为 (state, action) => state 的纯函数
  2. reducer: 专门的函数来决定每个 action 如何改变应用的 state (纯函数: 只要传入参数相同, 返回计算结果一定相同)
  3. Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的. actions只是描述了有事情发生了这一事实，而Reducers描述了应用该如何更新 state。
  4. 随着应用不断变大，你应该把根级的 reducer 拆成多个小的 reducers，分别独立地操作 state 树的不同部分. combineReducers({redux1, redux2}) 合成根reducer

注意:

  1. 不要修改state
  2. 在 default 情况下返回旧的 state

React函数式写法使用redux

  1. 获取redux中的值: const userInfo = useSelector((state: any) => state.user.info);
  2. 改变redux中的值: const dispatch = useDispatch() dispatch({type: 'increment-counter', payload: {}}) 上面dispatch函数里面的参数就是一个action, 也可以用方法封装起来;

Redux 绑定到 React

在我们的 Redux 应用中，我们仍将使用 。 是由 React Redux 提供的高阶组件，用来让你将Redux 绑定到 React

const Root = ({ store }) => (
  <Provider store={store}>
    <Router>
      <Route path="/" component={App} />
    </Router>
  </Provider>
);

context, redux同样是存储跨组件的应用数据，有什么区别

  1. context的缺点：state的值都是被直接修改，数据安全性不及redux。 同时也不能使用redux的中间件，比如thunk/saga，在一些异步的情况需要自己来处理。
  2. redux对数据管理比较严格,在大型应用中比较容易跟踪数据变化; 但是相对比较啰嗦和繁琐
  3. 和Redux相比，Context API都解决了Redux存在的"一些信息的内容需要根据组件的包含关系决定，而Redux难以处理这类包含关系"的问题
  4. 使用useReducer(React自带) + context, 可以架设相对于局部redux的东西; 数据安全性有所增强

useReducer

  1. useReducer是React Hook 的简单状态管理. 可以优化组件间的状态管理和应用的轻便性能。但是同样还没有 middleware 的解决方案.
  2. useReducer使用教程: www.cnblogs.com/lovevin/p/1…
  3. const [state, dispatch] = useReducer(reducer, initState)
  4. 结合Context 在没有useContext的时候, 类组件调用Context需要三要素CreateContext, Context.Provider和Context.Consumer 有了useContext, 类组件调用三要素改为CreateContext, Context.Provider和useContext hooks中context的用法 const HeaderControl = createContext<传递的数据类型>({ showHeader: () => {}, //这个是初始值, hiddenHeader: () => {} }) <HeaderControl.Provider value={{showHeader, hiddenHeader}}> const { showHeader, hiddenHeader } = useContext(HeaderControl)

把useReducer生成的state和dispatch塞到Content传递的对象 子组件直接通过useContext, 获取响应的state和dispatch即可使用

avatar
文章
阅读
粉丝