React Action，Reducer＆Connect語法

我有以下React Code在Redux商店中創建布爾值true/false，然後用它來打開/關閉Material UI Drawer/Side Menu。React Action，Reducer＆Connect語法

我是新來的反應，我想問問，如果我在做什麼是正確的，或者如果我做明顯的失誤等

注：該解決方案的工作（它打開/關閉抽屜預期）。我只是想知道我是否應該編碼不同......我也已經取消了一點代碼，以便它可以更容易地閱讀......

操作文件：

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

來源

2017-09-25 Adam

你可以在你的'setDrawerPopOutMenuStatus'中簡單的'return！state;'。我建議你看看[redux-thunk]（https://github.com/gaearon/redux-thunk），以簡化你的操作。 –

你爲什麼不做出這種行爲是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; 
    } 
}

這使得它更容易管理後，當該項目是較大的。

來源

2017-09-25 07:34:48 HyeonJunOh

不客氣:) – HyeonJunOh

React Action，Reducer＆Connect語法

回答

相關問題