1.在React项目中使用react-redux,可以让你更方便的使用redux，原理是在index.js中注册app时用一个<Povider>标签嵌套，把你的App.js变Provideer的子组件，将所有的state以props的形式传给<App/>

App.js

import React, { Component } from "react";
import About from "./pages/About"; //About是路由组件
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import store, { persistor } from './store/index'

export default class App extends Component {
    render() {
        console.log('store', store)
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <About></About>
                </PersistGate>
            </Provider>
        );
    }
}

2.创建store文件

createStore:创建一个 Redux store 来以存放应用中所有的 state

applyMiddleware:中间件,在redux里面就是来增强creatStore方法的

compose: 组合函数

redux-persist: 用来实现数据持久化

store/index.js

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { persistStore, persistReducer } from 'redux-persist'
//  存储机制，可换localStorage, sessionStorage等，当前使用storage
import storage from 'redux-persist/lib/storage';
import rootReducer from './reducers'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const initState = 0
const middleware = [thunk]

const persistConfig = {
    key: 'root', // 必须有的
    storage: storage, // 缓存机制
    stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = createStore(
    persistedReducer,
    initState,
    compose(
        applyMiddleware(...middleware)
    ),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

export const persistor = persistStore(store)

export default store

4.包含n个action的type常量名称的模块 ,这里只是避免reducers和action的type中的常量不一致

constant/types.js

 export const ADD_NUM = 'ADD_NUM'

 export const DEL_NUM = 'DEL_NUM'

创建reducers,Reducers是真正实现state数据变化的工作

reducers/numReducer.js

import { ADD_NUM, DEL_NUM } from '../constant/types'

const initState = 0

const calculate = (state = initState, action) => {
    let payload = action.payload
    switch (action.type) {
        case ADD_NUM:
            state = payload + 1
            return state
        case DEL_NUM:
            state = payload - 1
            return state
        default:
            return state
    }
}

export default calculate

combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore

reducers/index.js

import { combineReducers } from 'redux'
import numReducer from './numReducer'

export default combineReducers({ num: numReducer })

配置异步action

action/numAction.js

import { ADD_NUM, DEL_NUM } from '../constant/types'

export const add = item => dispatch => {
    dispatch({
        type: ADD_NUM,
        payload: item
    })
}

export const del = item => dispatch => {
    dispatch({
        type: DEL_NUM,
        payload: item
    })
}

运用到组件中

import React from 'react'
import {connect} from 'react-redux';
import {add, del} from '../../store/action/numAction';
 
 function About(props) {
	 const { add, del, item } = props
	 const test = () => { add(item) }
	 const test1 = () => { del(item) }
		return (
			<div>
             <h3>我是About的内容</h3>
			 <div>{item}</div>
			 <button onClick={() => test()}>
                增加
            </button>
            <button onClick={() => test1()}>
                减少
            </button>
			</div>
		)
}

const mapStateToProps = (state) => {
    return { item: state.num }
}

const mapDispatchToProps = (dispatch) => {
    return {
        add(data){ dispatch(add(data)); },
        del(data){ dispatch(del(data)); }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(About);