react项目中集成redux

Redux的使用

redux和react-redux的安装

npm install redux

npm install react-redux

npm install redux-thunk

react

createStore()

生成store

在项目初始化默认index文件中设置./index.js

import {createStore} from 'redux'
const store = createStore(fn)

在项目根目录下新建reduxStore.js

导入reducer

import {combineReducers} from 'redux'
import index from './main/reducers/index'
import page1 from './main/reducers/page1'

const storeTree = combineReducers({
    index,
    page1
})

export default storeTree;

react-redux

connect()

在需要redux的前端页面使用,从UI组件生成容器组件

import {connect} from 'react-redux'

const List = connect(
	mapStateToProps,
	mapDispatchToProps
)
//mapState负责输入逻辑，将state映射到UI组件的参数（Props）
//mapDispatchToProps负责输出逻辑，将用户对UI组件的操作映射为action

mapStateToProps()

函数：建立一个从（外部state到props）的映射关系

const mapStateToProps = state =>{
	return {
		param:state.page.param
	}
}

mapDispatchToProps

用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store

Provider

在项目初始化默认index文件中设置./index.js

让容器组件拿到state

import {Provider} from 'react-redux'
import {createStore} from 'redux'
import reducerFile from './reducers'
import App from './component/App'

let store = createStore(reducerFile)

render(
	<Provider store = {store}>
    	<App />
    </Provider>
	document.getElementById('root')
)

总体修改过程

createStore和Provider

//根目录index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import './common/assets/style/style.css'
import App from './App';
import * as serviceWorker from './serviceWorker';
//redux引入文件和模块
import storeTree from './store';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import { BrowserRouter as Router } from 'react-router-dom';

const store = createStore(storeTree, applyMiddleware(thunk));

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

新建文件整合reducers

//根目录下新建reduxStore.js
import {combineReducers} from 'redux'
import index from './main/reducers/index'
import page1 from './main/reducers/page1'

const storeTree = combineReducers({
    index,
    page1
})

export default storeTree;

创建action、reducer、constant

• constant

// ../constants/index.js
export const SETTEST="SETTEST";

• action

// ../actions/index.js
import {SETTEST} from '../constants/index'

export const setTest = (test) => {
    return (dispatch) =>{
        dispatch({
            type:SETTEST,
            test:test
        })
    }
}

• reducer

// ../reducer/index.js
import {SETTEST} from '../constants/index'

const INIT_STATE ={
    test:"test"
}

export default function setPortList(state= INIT_STATE, action){
    switch(action.type){
        case SETTEST:
            return {
                ...state,
                test:action.test
            }
        default:
            return state
    }
}

需要使用redux的页面上加入redux

// pages/index.js
import {connect} from 'react-redux'
import {setTest} from '../actions/index'
const mapStateToProps = state =>{
    return {
        'test':state.index.test
    }
}

@connect(mapStateToProps,{setTest})
class Index extends Component{...}

按序加载装饰器

//config-override.js
const { override, fixBabelImports,addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),addDecoratorsLegacy(),
);