Redux使用介绍

---

前言

这部分学习React,学习这部分时有些绕晕了，还是记录梳理一下来巩固学到的知识。

---

一、Redux工作流程

Redux是一个数据管理框架，提供store统一的数据存储仓库，store就像是一个数据管理的中间人，让我们组件之间无须再直接进行数据传递。

1.创建store和reducer，获取store中的数据

在index下面创建store 并把创建好的reducer（这里是CounterReducer）函数传入store

import {createStore} from 'redux'
import CounterReducer from './store/Counter.reducer'

const store = createStore(CounterReducer)

CounterReducer函数默认导出的，也就是存储在store中的数据

export default () => {
    return {
        count:10
    }
}

现在store和reducer（这里是CounterReducer）就创建好了，怎么把他们联系起来呢
在store中调用react-redux中的Provider这个方法，包裹我们的底层组件，把store向App这个组件传递，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore} from 'redux'
import CounterReducer from './store/Counter.reducer'
import {Provider} from 'react-redux'

const store = createStore(CounterReducer)
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
    
  </React.StrictMode>,
  document.getElementById('root')
);

那store传递下去了，那我们这里有一个写好的Counter组件，那怎么在Counter中获取store中存储的数据呢，这里用到从react-redux中调用的connet方法，在这里要两次调用，第一次调用是获取store中的数据，第二次调用则表示把从store中获取到的数据传递给哪个组件，代码如下：

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

class Counter extends React.Component{
    constructor(props) {
        super(props)
        console.log(props)
    }
    
    render () {
        return (
            <div>
                <button>-1</button>
                <span>{this.props.count}</span>
                <button>+1</button>
            </div>
        )

    }
}
const mapStateToProps = (state) => ({
    count:state.count
})

export default connect(mapStateToProps)(Counter)

创建store和reducer就可以了 ，现在我们可以把存储到store中的数据在组件中进行使用，那我们怎么修改store中的数据呢，请看下面部分。

2.修改store的数据

修改数据流程：我们修改store中修改数据，并不能在组件中直接进行修改，要借助于action指令，把指令传递给我们的store，store再把指令传递给reducer，reducer接收到当前的指令之后就开始处理修改的逻辑，最后我们再把最终修改好的数据返回给我们store，store数据做了更新，我们的组件就会做相应的渲染。
组件里面我们调用props里面的dispatch这个方法，把我们定义的指令传递给type，代码如下：

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

class Counter extends React.Component{
    constructor(props) {
        super(props)
        // console.log(props)
    }
    
    render () {
        return (
            <div>
                <button onClick={() =>{this.props.dispatch({type:'add'})}}>+1</button>
                <span>{this.props.count}</span>
                <button onClick={() =>{this.props.dispatch({type:'reduce'})}}>-1</button>
            </div>
        )

    }
}
const mapStateToProps = (state) => ({
    count:state.count
})

export default connect(mapStateToProps)(Counter)

指令写好了，接下来再reducer中对我们相应的指令做出处理，这里定义了一个初始值，用action来接收指令，将处理后的数据返回给store，代码如下：

//定义一个初始值
const initailState = {
    count:5
}
export default (state=initailState,action) => {
    console.log(action)
    switch (action.type) {
        case 'add':
            return {count: state.count + 1}
        case 'reduce':
            return {count: state.count - 1}
        default:
            return state
    }
}

修改store数据部分就完成了，但是我们不能把action指令始终放在我们的组件里面，这样不利于我们管理，我们要把action单独的抽离出来作为函数，利于我们管理。

3.提取action代码为函数

首先我们可以用我们connect的第二个参数来从props中获取我们的指令，把我们写好的指令抽离出函数，在点击事件中直接从props中调用就好了，代码如下：

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

class Counter extends React.Component{
    constructor(props) {
        super(props)
        // console.log(props)
    }
    
    render () {
        return (
            <div>
                <button onClick={this.props.add}>+1</button>
                <span>{this.props.count}</span>
                <button onClick={this.props.reduce}>-1</button>
            </div>
        )

    }
}
const mapStateToProps = (state) => ({
    count:state.count
})
const mapDispatchToProps = (dispatch) => ({
    add () {
        dispatch({type:'add'})
    },
    reduce () {
        dispatch({type:'reduce'})
    }
})

export default connect(mapStateToProps,mapDispatchToProps)(Counter)

这里借用一个自动把action指令传递给dispatch的方法bindActionCreators，来自于redux。这个时候把action指令单独的抽离出去作为store下面的文件，叫做actions专门用于存储所有组件的指令，同级于reducers文件。如下图：

Counter.actions.js里面专门写action指令，代码如下：

export const add = () => ({type:'add'})
export const reduce = () => ({type:'reduce'})

在组件中利用bindActionCreators，对从Counter.actions.js中拿到的所有指令进行重新组装，代码如下：

import React from "react";
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as CounterActions from '../store/Actions/Counter.actions'

class Counter extends React.Component{
    constructor(props) {
        super(props)
        // console.log(props)
    }
    
    render () {
        return (
            <div>
                <button onClick={this.props.add}>+1</button>
                <span>{this.props.count}</span>
                <button onClick={this.props.reduce}>-1</button>
            </div>
        )

    }
}
const mapStateToProps = (state) => ({
    count:state.count
})
const mapDispatchToProps = (dispatch) => ({
    ...bindActionCreators(CounterActions,dispatch)
})

export default connect(mapStateToProps,mapDispatchToProps)(Counter)

---

总结

本文简单介绍了redux的一个基础使用方法。