React Action, Reducer & Connect 구문

Question

다음 React Code를 사용하여 Material UI Drawer/Side Menu를 열거 나 닫는 데 사용되는 Redux 상점에서 부울을 true/false로 만듭니다.

나는 반응하는 새로운 그리고 난 내가 무엇을하고있어 것이 맞는지 물어보고 싶은게 또는 I 등 명백한 실수를 만들고 있어요 경우

는 참고 :이 솔루션은 작동 (은/닫는 서랍으로 열립니다 예상).

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

Answer 1

왜 아래 같은 const 등의 조치를하지 않는? 또한 단일 값이 아닌 객체를 사용하여 상태를 저장하는 것이 훨씬 편리합니다.

이보다 쉽게 ​​프로젝트가 더 큰 경우 나중에 관리 할 수 ​​있습니다

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

을 action.js.