title: 三步使用装饰器添加redux状态管理
date: 2019-09-07 07:25:09
tags: React
categories:

  • 前端

1.在最外边index组件用Provider将所有组件包裹起来，并提供全局唯一的store

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

import { createStore } from "redux";
import { Provider } from "react-redux";
import {reducer} from "./redux/redux"
const store = createStore(
    reducer,
    window.devToolsExtension?window.devToolsExtension():undefined
)

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

2.reducer本身需要提供的两个方法，reducer和返回各种json对象的actions函数

// actions
export function setState(data){
    return {
        type:"SET_STATE",
        data
    }
}

// reducers
export const reducer = (state = {
    path:"/dataset",
    columns:[],
    data:[]
}, action) => {
    let data = action.data;
    switch (action.type) {
        case 'SET_STATE':
            state.path = data.path
            console.log(data)
            return state
        default:
            return state
    }
}

3.在需要使用redux的组件中这样写

/**
 * layout 侧边栏菜单
 */
@connect(
    state => ({reduxStore:state}),{setState}
)
class index extends Component {
    state = {
        collapsed: false
    };

    onCollapse = collapsed => {

然后调用this.props.reduxStore就可以使用保存在redux中的各种state了，调用action的话，直接调用this.props.action就可以了。

4.需要注意的地方

  • 在reducer方法中一定要返回state,不然无法取到action设置的state

  • 使用装饰器@connect的话就无法导出export default 组件名，只能在组件末尾导出export default 组件名，所以组件必须有一个临时的名字。