Redux（二）：在React中使用Redux

一、使用模型

React使用Redux需要用到connect这个概念
从react-redux这个package引入以后，就可以使用了

但其实connect没有什么好讲的，套用下面这个模型就可以了

① Redux连接React的大致模型如下：

import { Provider, connect } from 'react-redux'

class A extends Component {
    //这个是想要使用redux的组件
}

/**
**需要弄一个store出来
**/

// 按照组件的需要把要用到的state按照对象的形式返回
function mapStateToProps(state) {
    return {
        nextgen: state.nextgen,
        router: state.router
    }
}
// 使用bindActionCreators返回一个绑定了dispatch的action函数
function mapDispatchToprops(dispatch) {
    return {
        actions: bindActionCreators({ ...actions },dispatch)
    }
}

//使用connect将Store和组件A连接起来，返回一个新组件。原理是高阶函数
const Example = connect(mapStateToProps, mapDispatchToprops)(A)

// 需要用到Provider，类似于Context API
export default class Sample extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Example />
      </Provider>
    );
  }
}

② 具体实例

import React from "react";
import { bindActionCreators, createStore } from "redux";
import { Provider, connect } from "react-redux";

// Store initial state
const initialState = { count: 0 };

// reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case "PLUS_ONE":
      return { count: state.count + 1 };
    case "MINUS_ONE":
      return { count: state.count - 1 };
    case "CUSTOM_COUNT":
      return { count: state.count + action.payload.count };
    default:
      break;
  }
  return state;
};

// Create store
const store = createStore(counter);

// Action creator
function plusOne() {
  // action
  return { type: "PLUS_ONE" };
}

function minusOne() {
  return { type: "MINUS_ONE" };
}

export class Counter extends React.Component {
  render() {
    const { count, plusOne, minusOne } = this.props;
    return (
      <div className="counter">
        <button onClick={minusOne}>-</button>
        <span style={{ display: "inline-block", margin: "0 10px" }}>
          {count}
        </span>
        <button onClick={plusOne}>+</button>
      </div>
    );
  }
}

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

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ plusOne, minusOne }, dispatch);
}

const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

export default class CounterSample extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ConnectedCounter />
      </Provider>
    );
  }
}

参考文档：https://redux.js.org/introduction/getting-started

参考视频：https://time.geekbang.org/course/detail/100009301-9451?utm_source=pinpaizhuanqu&utm_medium=geektime&utm_campaign=guanwang&utm_term=guanwang&utm_content=0511