Reactjs React操作、Reducer和Connect语法

我有以下React代码在Redux store中创建booleen true/false，然后用于打开/关闭材质UI抽屉/侧菜单

我是一个新的反应者，我想问我所做的是正确的还是犯了明显的错误等等

注意：解决方案在按预期打开/关闭抽屉时起作用。我只是想知道我是否应该以不同的方式编码。。。此外，我已经删除了一个小代码，所以它可以更容易地阅读

操作文件：

export const setDrawerPopOutMenuStatus = {
    type: 'DRAWER_POPOUT_MENU_STATUS'
}

还原程序文件：

import { combineReducers } from 'redux';

const setDrawerPopOutMenuStatus = (state = true, action) => {
    switch (action.type) {
        case 'DRAWER_POPOUT_MENU_STATUS':
            if(state) {
                return false;
            }else{
                return true;
            }
        default:
            return state;
    }
}

export default combineReducers({
    setDrawerPopOutMenuStatus
})

存储文件

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from './reducers.js';
import { setDrawerPopOutMenuStatus } from './actions.js';


const store = createStore(reducer, composeWithDevTools());

const render = () => {
    console.dir(store.getState());
};

store.subscribe(render);
render();

export default store;

Index.js起始文件：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import store from './store.js';
    import './index.css';
    import App from './components/App.js';
    import registerServiceWorker from './registerServiceWorker';

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

最后，组件将状态传递给子组件：

import React from 'react'
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { setDrawerPopOutMenuStatus } from "../actions";


class App extends React.Component {

    // Redux Drawer State (Toggle PopOut Menu)
    drawerPopOutHandle = () => {
        this.props.drawerPopOutUpdated();
    }


    // PreLoad Actions (eg: make action run once to start with)
    componentDidMount() {
        this.props.drawerPopOutUpdated()
    }


    render() {
        return (
                <LeftDrawerMenu drawerStatus={this.props.drawerStatus}/>
        )
    }
}





App.propTypes = {
    drawerStatus: PropTypes.bool
};

const mapStateToProps = (state) => {
    console.log('drawer status: '+state.setDrawerPopOutMenuStatus);

    return {
        drawerStatus: state.setDrawerPopOutMenuStatus
    }
}

const mapDispatchToProps = (Dispatch) => {
    return({
        drawerPopOutUpdated: () => Dispatch(setDrawerPopOutMenuStatus)
    })
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

---

你为什么不像下面这样做呢？使用对象而不是单个值来存储状态也会非常方便

action.js

/*Action*/
export const DRAWER_POPOUT_MENU_STATUS = 'DRAWER_POPOUT_MENU_STATUS';

/*Action Creator*/
export const setDrawerPopOutMenuStatus = {
    type: DRAWER_POPOUT_MENU_STATUS,
}

reducers.js

import { combineReducers } from 'redux';
import { DRAWER_POPOUT_MENU_STATUS } from './action';

const initialState = {
    someName: true,
};

const setDrawerPopOutMenuStatus = (state = initialState, action) => {
    switch (action.type) {
        case DRAWER_POPOUT_MENU_STATUS:
            let newState = {};
            newState['someName'] = !state.someName;
            return Object.assign({}, state, newState);
        default:
            return state;
    }
}

这使得以后在项目较大时更易于管理。

您只需返回即可！状态在您的SetDroperPoutMenuStatus中。我建议你看看，简化你的行动。