Skip to main content

Redux

Redux 其实是一种架构，适用于多交互、多数据源的复杂应用程序。借助 Redux，我们可以统一管理状态，并且在不同组件间更快捷地传递数据

Flux​

一个典型的 Flux 工作流是这样的：用户与 View 之间产生交互，通过 View 发起一个 Action；Dispatcher 会把这个 Action 派发给 Store，通知 Store 进行相应的状态更新。Store 状态更新完成后，会进一步通知 View 去更新界面

Flux 最核心的地方在于严格的单向数据流，在单向数据流下，状态的变化是可预测的

flux架构.png

Redux​

redux.png

原则：

  • 只有一个 store 实例
  • state 只能通过触发 Action 来更改
  • State 的更改(Reducer)必须写成纯函数，(oldState, action) => newState，也就是每次更改总是返回一个新的 State

基础使用​

  1. 新建 store
import { createStore, combineReducers } from "redux";
import reducer from "./recuder";

const initState = {
  count: 0,
};

const store = createStore(combineReducers(reducer), initState);

export default store;
  1. App.js 中引入 store
import { Provider } from "react-redux";
import store from "./store";

const App = () => {
  return (
    <Provider store={store}>
      <Count />
    </Provider>
  );
};

export default App;
  1. 组件中使用
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increaseCount } from "./action";

const CountItem = (props) => {
  const { count, increase } = props;

  return (
    <>
      {count}
      <button onClick={increase}>Count++</button>
    </>
  );
};

const Count = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  const increase = () => {
    dispatch(increaseCount(count));
  };

  return <CountItem count={count} increase={increase} />;
};

export default Count;

原理​

我觉得 redux 比较关键的几个点是：

  • 单向数据流
  • 单例模式，确保单个应用只有一个 store 实例
  • 发布订阅模式
  • 中间件

中间件【WIP】​