在create-react-app中集成redux

安装 redux react-redux redux-thunk

yarn add redux react-redux redux-thunk

项目目录如下

企业微信截图_20200227110831.png

项目中添加store/actions/index.js

const login = user => {
    return {
        type: 'LOGIN',
        user,
    };
};

添加store/reducers/index.js

import {combineReducers} from 'redux';

const login = (state = {}, action) => {
    switch (action.type) {
        case 'LOGIN':
            return {
                ...action.user,
            };
            break;
        default:
            return state;
    }
}


export default combineReducers({
    login
});

编写store/index.js

//store/index.js
import {createStore, applyMiddleware, compose} from 'redux';
//引入Reducer
import Reducer from './reducers';
//引入中间件
import thunkMiddleware from 'redux-thunk';

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
const configureStore = (initialState) => {
    const store = createStoreWithMiddleware(Reducer, initialState);
    return store;
}
export default configureStore()

修改index.js

//...

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

ReactDOM.render(<ConfigProvider locale={zh_CN}>
    <Provider store={store}>
        <Router/>
    </Provider>
</ConfigProvider>, document.getElementById('root'));

serviceWorker.unregister();

修改业务组件 以app.js为例

import React, {Component} from 'react';

import {connect} from 'react-redux';


class App extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (<div>appIndexPage</div>)
    }
}
//添加store中的state
const mapStateToProps = (store) => {
    return store;
};
//添加dispatch方法
const mapDispatchToProps = (dispatch) => {
    return {
        dispatch
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

验证

到其他业务组件里面验证

企业微信截图_20200227112257.png

结束

本文章主要提供展示--请根据自身情况合理优化项目、代码、以及更多功能