React Action、Reducer 和 Connect 语法

Question

我有以下 React 代码在 Redux 存储中创建布尔值 true/false，然后用于 open/close Material UI Drawer/Side 菜单.

我是 React 的新手，我想问一下我做的是否正确，或者我是否犯了明显的错误等。

注意：该解决方案有效（如预期的那样 opens/closes 抽屉）。我只是想知道我是否应该以不同的方式编码...我还删除了一些代码以便更容易阅读...

动作文件：

export const setDrawerPopOutMenuStatus = {
    type: 'DRAWER_POPOUT_MENU_STATUS'
}

Reducers 文件：

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);

Answer 1

你为什么不像下面这样 const 采取行动呢？同样使用对象而不是单个值来存储状态会更方便。

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;
    }
}

当项目变大时，这使得以后管理起来更容易。

React Action、Reducer 和 Connect 语法

React Action, Reducer & Connect Syntax

store

connect

reactjs

redux

react-redux