升级 Redux - React-Redux

React-Redux 主要解决了 Redux 里状态需要通过props一层一层往下传递的问题, 同时不用手动订阅(绑定 render 函数).

基本使用

创建 store

// index.js
import { createStore } from "redux";
import { Provider } from "react-redux";

const reducer = (state, action) => {
  if (state === undefined) {
    return { n: 0 };
  } else {
    if (action.type === "add") {
      return { n: state.n + action.payload };
    } else {
      return state;
    }
  }
};
const store = createStore(reducer);

创建 Provider

// index.js
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

我们将store放在Provider里. 我们可以在<App />内部任意组件直接获取state.

mapStateToProps & mapDispatchToProps

接下来, 我们就要在组件里获取state, 并发起更改请求:

// App.js

import { connect } from "react-redux"; //用于连接state, action 与组件

function mapStateToProps(state) {
  return {
    n: state.n
  };
}

function mapDispatchToProps(dispatch) {
  return {
    add1: () => dispatch({ type: "add", payload: 1 })
  };
}

任何组件想要获取state和发起dispatch都要声明这两个函数.

// App.js

class App extends Component {
  render() {
    return (
      <div>
        你点击了 <span id="value">{this.props.n}</span> 次
        <div>
          <button id="add1" onClick={() => this.props.add1()}>
            +1
          </button>
        </div>
      </div>
    );
  }
}

mapStateToProps和mapDispatchToProps函数把store里的状态和action映射到当前组件的props里, 我们就通过props来操作. 最后调用connect将组件与 map 函数绑定并导出:

// App.js

export default connect(mapStateToProps, mapDispatchToProps)(App);

总结

状态的初始值都在store里, store被放在Provider里. 各个组件通过 map 函数把状态和 action 映射到组件的 props 上. 最后通过connect函数将 map 函数与组件绑定在一起.