下載安裝

npm install react-redux redux --save

概念：

Provider組件：自動(dòng)的將store的state和組件進(jìn)行關(guān)聯(lián)
mapState:這個(gè)函數(shù)用于將store的state映射到組件的props
mapActions:將store中的dispatch映射到props里，實(shí)現(xiàn)了數(shù)據(jù)的共享
connect方法：將組件和數(shù)據(jù)（方法）進(jìn)行連接

項(xiàng)目目錄下src/redux/store

import {createStore} from 'redux';

// 初始化數(shù)據(jù)
const intialState={
    num:1
}

let  actions={
    add:(state,action)=>{
        state.num++;
        return state
    },
    decrement:(state,action)=>{
        state.num--;
        return state
    }
}
// 通過(guò)動(dòng)作，創(chuàng)建新的state
const reducer=(state={    //state的默認(rèn)值
    ...intialState
},action)=>{              //通過(guò)調(diào)用store.dispatch({type:'add'})，可使state.num自增
    console.log(action)
    // switch (action.type){
    //     case 'add':
    //         state.num++;
    //         break;
    //     case 'decrement':
    //         state.num--;
    //         break;
    //     default:
    //         break;
    // }
    // 這里是簡(jiǎn)化switch的寫(xiě)法，在上面的actions里面定義修改數(shù)據(jù)的動(dòng)作會(huì)更加直觀明了
    let type=action.type
    let keys=Object.keys(actions);
    if(keys.indexOf(type)>=0){
        state=actions[type](state,action)
    }
   
    // 返回一個(gè)新的對(duì)象（修改過(guò)后的）
    return {...state};   //舊版本
    // return state   //新版本
}
// 將mapState和mapActions映射到組件的props上面
export const mapState=(state)=>{
    return {
       ...state
    }
}
export const mapActions=(dispatch)=>{
    let keys=Object.keys(actions);
    console.log(keys)
    let obj={}
    for(let index=0;index<keys.length;index++){
        obj[keys[index]]=()=>{dispatch({type:keys[index]})}
    }
    return obj
    // 上面的方法是用于簡(jiǎn)化下面的方法，不用每次寫(xiě)一個(gè)action，就往return的對(duì)象里添加一個(gè)方法去dispatch動(dòng)作
    // return{
    //     add:()=>{dispatch({type:'add'})}
    // }
}


// 創(chuàng)建倉(cāng)庫(kù)
export const store=createStore(reducer)

項(xiàng)目目錄下src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import {Provider} from 'react-redux';
import {store} from './redux/store'

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

頁(yè)面(組件)使用

import React from 'react';
// import store from '../Redux'
import {mapActions,mapState} from '../Redux/reactRedux';
import {connect} from 'react-redux'
const App = (props) => {
    //intialState和actions里的內(nèi)容就被整合到了props里
    return (
        <div>
            <p>{props.num}</p>
            <button onClick={()=>{props.add()}}>加</button>
        </div>
    );
}
//connect方法：將組件和數(shù)據(jù)（方法）進(jìn)行連接
export default connect(mapState,mapActions)(App);

個(gè)人覺(jué)得redux比react-redux要簡(jiǎn)單好用些