React 基础 - 16 （组件中使用redux）

1、创建store文件   /src/store/index.js

import { createStore } from "redux";

//1、初始化
const initState = {
  num: 1,
};

//2、定义修改方法
const reducer = (state = initState, action) => {
  switch (action.type) {
    case "doAdd":
      return { ...state, num: state.num + 1 };

    default:
      return state;//默认返回state
  }
};

//3、创建store管理reducer
//导出
export const store = createStore(reducer)

2、/src/index.js并给组件注入store

         引入：

//引入Provider
import { Provider } from "react-redux";
//引入store
import { store } from "./store";

        配置：

//注入store，注入后，组件中才可以使用
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

3、创建组件/src/components/One.js，引入在App.js中

        App.js：

import React, { Component } from "react";
import One from "./components/One";
export default class App extends Component {
  render() {
    return (
      <div>
        <One />
      </div>
    );
  }
}

        /src/components/One.js：

        快捷生成模板： rcredux

import React, { Component } from "react";
import { connect } from "react-redux";

export class One extends Component {
  render() {
    console.log(this.props);
    const { num } = this.props.state;
    const { doAdd } = this.props;
    return (
      <div style={{ border: "1px solid red" }}>
        <div>One组件</div>
        <div>num:{num}</div>
        <div>
          <button onClick={() => doAdd()}>num+1</button>
        </div>
      </div>
    );
  }
}

//读取，映射state到组件中
const mapStateToProps = state => ({
  state,
});

//修改
//第一个doAdd是组件内部调用的方法，第二个doAdd是操作store方法的参数
const mapDispatchToProps = dispatch => ({
  doAdd: () => dispatch({ type: "doAdd" }),
});

//把state注入到props，把dispatch注入到props
export default connect(mapStateToProps, mapDispatchToProps)(One);