React-redux使用（一）

最近有在使用react-redux进行全局状态托管，长时间不用遗忘了不少，所以今天记录下一个基本使用代码，以便之后复习使用

1. 下载redux和react-redux两个包
   npm i redux
   npm i react-redux
2. 在src页面创建reducer和store两个文件，在reducer中用为action.type设置不同的值，通过判断action.type 的值来申明不同的处理函数
3. 在store文件中 用createStore方法挂载reducer中的处理函数
4. 在需要用来接收值和传递值的页面使用connect包裹组件加强组件，在页面中使用props接收store中的state中的数据

reducer页面代码

// 初始化state
const initState = {
    sum: 10
}

exports.reducer = (state = initState, action) => {
// 判断action传过来的值并作数据处理，通过return返回
    switch (action.type) { 
        case 'add-action':
            return {
                sum: state.sum + 1
            }
        case 'action':
            return {
                sum: state.sum - 1
            }
        default:
            return state
    }
}

store代码

import {createStore} from 'redux'
import {reducer} from '../reducer/index'

export default createStore (reducer)

在App.js页面导入react-redux中的Provider和我们自己创建的store,用Provider包裹我们的组件
App代码

import ComA from './pages/comA'
import ComB from './pages/ComB'
import { Provider } from 'react-redux'
import store from './store/index'

function App() {
  return (
    <Provider store={store}> // 将store挂在到Provider传递给子组件，子组件通过props接收
      <div className="App">
        <ComA />
        <br />
        <ComB />
      </div>
    </Provider>
  );
}

export default App;

用connect包裹需要使用公共数据管理的组件，通过props来获取reducer中的方法

组件A代码

import React from "react";
import { connect } from 'react-redux'
class ComA extends React.Component {
    sendAdd = () => {
        this.props.sendAction()
    }
    sendCut=()=>{
        this.props.Action()
    }
    render() {
        return (
            <div>
                <button onClick={this.sendAdd}>+++</button>
                <button onClick={this.sendCut}>---</button>
            </div>
        )
    }
}

const getDoWork = (dispatch) => {
    return {
        sendAction: () => {
            dispatch({
                type: 'add-action'
            })
        },
        Action:()=>{
            dispatch({
                type:'action'
            })
        }
    }
}
// 发送数据使用的是connect第二个参数
export default connect(null, getDoWork)(ComA)  

组件B代码

import React from "react";
import { connect } from 'react-redux'

class ComB extends React.Component {
    render() {
        return (
            <button>{this.props.sum}</button>
        )
    }
}


const Receive= (state) => {
    return state
}
// 接收数据使用的是connect第一个参数
export default connect(Receive)(ComB)