復(fù)制即可使用，要注意文件的路徑

1. 下載依賴

npm install --save react-redux
npm install --save redux-thunk
npm install --save redux

2. 在src目錄下創(chuàng)建store文件夾

3. store下新建index.js文件

import { createStore, applyMiddleware, compose } from 'redux';
// 引入模塊化文件
import reducer from './reducer';
import thunk from 'redux-thunk';
// 這里是使用瀏覽器插件的配置
const composeFn = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose
const enhancer = composeFn(applyMiddleware(thunk))
// 創(chuàng)建并到處倉(cāng)庫(kù)
const store = createStore(reducer, enhancer);
export default store;

4. 再創(chuàng)建reducer.js文件，用來(lái)存放模塊化之后的數(shù)據(jù)

import { combineReducers } from 'redux';
import HomeReducer from './modules/home'
// 模塊化管理狀態(tài)
let reducer = combineReducers({
    home: HomeReducer,
})
export default reducer

5. 之后去index.js文件，對(duì)里面的東西進(jìn)行修改

import React from 'react';
import ReactDOM from 'react-dom';
// 注意要先寫(xiě)好路由
import Router from './router';
import { Provider } from 'react-redux';
import store from './store/index'

ReactDOM.render(
  <React.StrictMode>
    {/* 使用Provider包裹，再把store傳下去，那么就可以使用里面的數(shù)據(jù)了 */}
    <Provider store={store}>
      <Router />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

6. store文件夾下新建modules文件夾，用來(lái)存放模塊化的文件

7. modules文件夾下新建home.js文件，（這是個(gè)例子）

//defaultState這個(gè)是倉(cāng)庫(kù)里的東西，我們會(huì)使用這個(gè)數(shù)據(jù)
const defaultState = {
    num: 1
}
//我們會(huì)觸發(fā)里面的方法，對(duì)倉(cāng)庫(kù)的東西進(jìn)行修改
const HomeReducer = (state = defaultState, action) => {
    if (action.type === 'addNum') {
        // 這里寫(xiě)邏輯,還有，一定要JSON.parse(JSON.stringify(state))，不轉(zhuǎn)有坑
        let initState = JSON.parse(JSON.stringify(state));
        initState.num = initState.num + 1;
        return initState;
    }
    return state;
}
export default HomeReducer

8. 在頁(yè)面中使用

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

const Home = (props) => {
    return (
        <div>
            {props.num}
            <button onClick={props.clickButton}>click</button>
        </div>
    );
};

const stateToProps = (state) => {
    return {
        num: state.home.num,
    }
}

//3.這里把a(bǔ)ction里的方法綁定到props上，可以通過(guò)Props使用，一般用于修改store里的數(shù)據(jù)
const dispatchTOProps = (dispatch) => {
    return {
        clickButton() {
            let action = {
                type: 'addNum',
            }
            // 用dispatch觸發(fā)Store里的方法
            dispatch(action)
        },
    }
}
//4.通過(guò)react-redux提供的connect方法將我們需要的state中的數(shù)據(jù)和actions中的方法綁定到props上
export default connect(stateToProps, dispatchTOProps)(Home);