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

你可以在你的'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; 
    } 
}

这使得它更容易管理后，当该项目是较大的。

不客气:) – HyeonJunOh

React Action，Reducer＆Connect语法

相关推荐