在閱讀之前，建議先看狀態(tài)管理1

react-redux 是redux官方推出的，它能夠使你的React組件從Redux store 中很方便的讀取數(shù)據(jù)，并且向store中分發(fā)actions以此來更新數(shù)據(jù)。

react-redux 兩個(gè)重要的成員：

Provider: 它是一個(gè)組件，一般包裹在根組件外面，能夠使得你的整個(gè)app能獲取到store中的數(shù)據(jù)
Connect：這個(gè)方法能夠是我們的組件和store關(guān)聯(lián)
Connect - 參數(shù)說明
有四個(gè)參數(shù)，兩個(gè)比較重要：mapStateToProps (state, ownProps) 和 map DispatchToProps (dispatch, ownProps) ; 和兩個(gè)不常用的mergeProps(stateProps, dispatchProps, ownProps) 和 options

1. 參數(shù) mapStateToProps：類型 function； 這個(gè)函數(shù)允許我們將store中的數(shù)據(jù)作為props綁定到組件上；例如 mapStateToProps(state, ownProps) state: redux 中的store； ownProps： 自己的props； （用于接收action）
2. mapDispatchToProps(stateProps, dispatchProps, ownProps) 類型： function， 將action作為props綁定到我們自己的函數(shù)中，參數(shù)：dispatch： 就是store.dispatch() ownProps: 自己的props（用于發(fā)送action）

實(shí)現(xiàn)一個(gè)計(jì)數(shù)器的例子，來熟悉一下react-redux
初始值為10， 每點(diǎn)一次+， 增加1

image.png

我們將通過兩個(gè)組件來實(shí)現(xiàn)，組件A展示+號(hào)按鈕， 組件B展示數(shù)值， 點(diǎn)擊組件A的加號(hào) 實(shí)現(xiàn)組件B的數(shù)據(jù)+1

腳手架創(chuàng)建react項(xiàng)目

npx create-react-app redux-demo

安裝react-redux

yarn add react-redux

利用redux來構(gòu)建store

1. 在src目錄下創(chuàng)建 reducer文件夾，在reducer文件夾下添加index.js 文件，構(gòu)建reducer來響應(yīng)actions
   reducer接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是state， 第二個(gè)參數(shù)是action

// 首先定一個(gè)state 的初始值
const initState = {
    count: 10
};
// reducer 需要接受action 然后進(jìn)行邏輯處理 
// 判斷發(fā)送過來的action是不是我們需要的
// 如果是我們需要的，就應(yīng)該return一個(gè)新的state
exports.reducer = (state = initState, action) => {
    switch(action.type){
        case 'add_action':
            return {
                count:state.count + 1
            };
        default:
            return state;
    }
}

2. 在src目錄下創(chuàng)建store/index.js 文件，通過createStore方法，把reducer傳進(jìn)來

//  首先需要導(dǎo)入一下createStore 這個(gè)方法
import { createStore } from 'redux';
import { reducer } from '../reducer'

// 導(dǎo)入reducer的處理函數(shù) ， 構(gòu)建一個(gè)store
// 可以直接將這個(gè)store導(dǎo)出
export default createStore(reducer);

上面的兩個(gè)步驟我們創(chuàng)建了reducer 和 store， 你可能會(huì)疑惑action 去哪里了？ 一步步來，我們將把a(bǔ)ction放到對(duì)應(yīng)的組件中

引入Provider組件

1. 在app.js中引入Provider組件

import { Provider } from 'react-redux

2. 利用Provider組件將我們整個(gè)結(jié)構(gòu)進(jìn)行包裹，并且傳遞給store

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

新建組件

在src文件夾下新建page目錄，在page目錄下新建ComA 和 ComB 文件夾， ComA組件放加號(hào)，ComB組件放數(shù)值

ComA 組件

• 在ComA下新建index.js

import React from 'react';
class ComA extends React.Component{
    render(){
        return(
            <button> + </button>
        )
    }
}
export default ComA;

• 引入connect ， Provider只是維護(hù)store，connect 才是將組件和store關(guān)聯(lián)起來的

import {connect} from 'react-redux';

• 在開頭我們將來connect的兩個(gè)比較重要的參數(shù)：mapStateToProps (state, ownProps) 和 mapDispatchToProps (dispatch, ownProps) ;
  mapStateToProps 是將store中的數(shù)據(jù)作為props綁定到組件上
  mapDispatchToProps 是將action作為props綁定到組件上
  這里我們的組件A是+號(hào)按鈕，是事件發(fā)送方，所以不需要第一個(gè)參數(shù)，只需要實(shí)現(xiàn)第二個(gè)參數(shù)，也就是mapDispatchToProps
  下面讓我們實(shí)現(xiàn)mapDispatchToProps 它是一個(gè)函數(shù)，有兩個(gè)參數(shù)
  第一個(gè)參數(shù)：dispatch： 就是store.dispatch() ownProps: 自己的props（用于發(fā)送action）

/**
 *  這個(gè)函數(shù)要有一個(gè)返回值，返回值是一個(gè)對(duì)象
 * @param {*} dispatch 
 * @returns 
 */
const mapDispatchToProps = (dispatch) => {
    return {
        sendAction:()=>{
            // 利用dispatch 發(fā)送一個(gè) action 
            // action對(duì)象必須有type屬性
            dispatch({
                type:'add_action'
            })
        }
    }
}

• 將組件和 mapDispatchToProps 用connect綁定，并為按鈕添加點(diǎn)擊事件， 點(diǎn)擊事件就是從mapDispatchToProps return出來的方法
  ComA完整代碼：

import React from 'react';
// 導(dǎo)入connect
import {connect} from 'react-redux';

class ComA extends React.Component{
    handleClick = () => {
        console.log(this.props,'ppp')
        // 把sendAction傳過來了
        // 這里我們就發(fā)送action
        this.props.sendAction();
    }
    render(){
        return(
            <button onClick={this.handleClick}> + </button>
        )
    }
}
/**
 *  這個(gè)函數(shù)要有一個(gè)返回值，返回值是一個(gè)對(duì)象
 * @param {*} dispatch 
 * @returns 
 */
const mapDispatchToProps = (dispatch) => {
    return {
        sendAction:()=>{
            // 利用dispatch 發(fā)送一個(gè) action 
            // action對(duì)象必須有type屬性
            dispatch({
                type:'add_action'
            })
        }
    }
}

// 組件A是發(fā)送方， 所以要實(shí)現(xiàn)第二個(gè)參數(shù)
export default connect(null, mapDispatchToProps)(ComA)

ComB 組件

ComB用于顯示數(shù)值，它是接受state的，所以只要實(shí)現(xiàn)connect中的mapStateToProps ， 它store中的數(shù)據(jù)作為props綁定到組件上， 這里我們定義 mapStateToProps， 讓它直接將state返回， 那么組件B中就能直接使用props中的數(shù)值

import React from 'react'
// 導(dǎo)入connect
import { connect  } from 'react-redux'
class ComB extends React.Component{
    render(){
        return (
            <div>{this.props.count}</div>
        )
    }
}

/**
 *  接受兩個(gè)參數(shù)
 * @param {*} state 
 */
const mapStateToProps = (state) => {
    return state;
}
export default connect(mapStateToProps)(ComB)

最后將ComA 和 ComB 引入app.js 中

app.js 完整代碼

import './App.css';
import store from './store'
// 導(dǎo)入Provider組件，利用這個(gè)組件包裹我們的結(jié)構(gòu)，從而能夠達(dá)到統(tǒng)一維護(hù)store的效果
import {Provider} from 'react-redux'
import ComA from './page/ComA'
import ComB from './page/ComB'
// 導(dǎo)入store
function App() {
  return (
    <Provider store={store}>
    <div className="App">
      <ComA />
      <ComB />
    </div>
    </Provider>
  );
}

export default App;

以上就完成了一個(gè)簡(jiǎn)單的計(jì)數(shù)器