React Action、Reducer＆Connect Syntax

Question

以下のReact Codeを使用してReduxストアで真偽を作成し、Material UI Drawer/Side Menuの開閉に使用します。

など私が反応するように新たなんだと私は私がやっていることは正しいかどうかをお聞きしたかったのか、私は明白なミスをしていた場合

注：ソリューションが動作します（それは/が引き出しを通り開閉期待される）。私は、より簡単に読み取ることができるので、また、私は少しのコードを削除した...私は違ったコーディングする必要があるかどうかを知るためにだけ興味を持って...

アクションファイル：

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

コンポーネント（これはサブコンポーネントに状態を渡し）：あなたは以下のようなconstとして行動をしないのはなぜ

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

？単一の値ではなくオブジェクトを使用して状態を格納することも非常に便利です。

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

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

action.js 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; 
    } 
} 

これは、簡単にプロジェクトが大きいときには、後に管理することができます。