组件通信 - 用 Redux 取代 EventHub

查看源码

基本用法

创建 store

store用于存储state和reducer, 后者代表着处理state的逻辑:

import { createStore } from "redux";

let reducers = (state = { money: { amount: 10000 } }, action) => {
  if (action.type === "我想花钱") {
    return {
      money: {
        amount: state.money.amount - action.payload
      }
    };
  } else {
    return state;
  }
};

const store = createStore(reducers);

提交改变数据申请

store.dispatch({ type: "我想花钱", payload: 100 }); //{type: '...'} 是一个action

渲染状态更改后的组件

const render = () => {
  ReactDOM.render(
    <App store={store.getState()} />, // 获取state, 也是唯一获取state的方法
    document.getElementById("root")
  );
};
store.subscribe(render);

繁琐的声明

与之前的 EventHub 相比, 使用 Redux 时我们要增加许多新的代码, 要理解新的术语概念. 这样做确实起到这样一个作用: 规范开发者的代码, 避免一些错误. 但是对于老手来说, 实在难以忍受这些复杂的声明.

处理异步

Redux 推荐在异步后再 dispatch.

setTimeout(() => {
  store.dispatch({ type: "xxx", payload });
}, 2000);

fetch(url)
  .then(res => res.json)
  .then(store.dispatch((type: "xxx"), payload));

问题

在使用了 Redux 后, 子组件要想得到store里的state, 仍然要靠开发者手动使用props一层一层往下传. React-Redux 解决了这个问题.