react之redux的学习

react之redux的学习：自己整理的笔记，比较浅，有待提高深度

一、安装相关依赖

npm install redux
npm install react-redux

二、构建store和reducer

1.创建reducer/index.js文件，构建reducer来响应actions

//接收两个参数，第一个参数是state，另一个参数是action
const initState={
    count:1
}
//这里需要判断过来的action是不是我们需要的，如果是我们你需要的数据。那么就return一个新的satate
exports.reducer=(state=initState,action)=>{
    console.log('从ComA传过来的：',action)
    switch (action.type) {
        case 'add_action':
            return {
                count:state.count+1
            }
        default:
            return state;
    }
}

2.创建store/index.js文件，通过createStore方法，把我们的reducer传入进来

import {createStore} from "redux";
//导入我们自己的reducer处理函数
import {reducer} from '../reducer/index'
//构建store
export default createStore(reducer)

3.在app.js中引入store

import store from './store/index.js'

三、搭建页面结构

1.创建组件comA，里面一个btn按钮
2.创建组件comB，里面一个div来显示数字
3.在app.js中引入这两个组件

四、provider组件实现

1.导入provider组件，利用这个组件包裹我们的结构，从而达到统一维护store的效果，

import {Provider} from 'react-redux'

2.注入store

function App() {
  return (
      <Provider store={store}>
        <div className="App">
          <ComA/>
          <ComB/>
        </div>
      </Provider>
  );
}

五、ComA组件方：发送action

import React from 'react';
import {connect} from "react-redux"；
class ComB extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
//下面这个函数是事件的触发函数，写在render上面的
changeNum=()=>{
        console.log(this.props)
        //点击发送下面的action到reducer
        this.props.sendAction()
}
render() {
        return (
            <div>
                <h1>ComA组件</h1>
                <button onClick={this.changeNum}>点击++++</button>
            </div>
        )
    }
}
//下面这个函数是写在class模板下面的
const mapDispatchToProps=(dispatch)=>{
    return{
        sendAction:()=>{
            //利用dispatch发送要给action
            //传递action对象，我们要定义一个type属性
            dispatch({
                type:'add_action',//key方法名
                value: "我是来自ComA的数据"//传送的数据
            })
        }
    }
}
//组件A是发送方，第一个参数是要接受数据的函数，因此不用设置就用null，
//所以第二个参数是要发送action的函数：mapDispatchToProps，后面括号是要加强的组件
export default connect(null,mapDispatchToProps)(ComA)

六、ComB接受数据的组件

import React from 'react';
import {connect} from "react-redux"
 
class ComB extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        console.log(this.props)
        return (
            <div>
                <h1>ComB组件</h1>
                <div>{this.props.count}</div>
            </div>
        )
    }
}
//这里必须要返回一个state
const mapStateToProps=state=>{
    return state
}
//ComB是接收方，就需要实现connect的一个参数，
export default connect(mapStateToProps)(ComB)

注：学习视频地址：https://www.bilibili.com/video/BV1oE411V7RW