Réagir Action, Réduction & Connexion Syntaxe

Question

J'ai le code Réaction suivant pour créer un booleen vrai/faux dans le magasin Redux qui est ensuite utilisé pour ouvrir/fermer un tiroir/menu latéral d'interface utilisateur.

Je suis nouveau et je réagisse voulais vous demander si ce que je fais est correct ou si je fais des erreurs évidentes, etc.

Note: la solution fonctionne (il ouvre/ferme le tiroir comme attendu). Je viens intéressé de savoir si je devrais le codage différemment ... j'ai aussi enlevé un peu de code afin qu'il puisse être lu plus facilement ...

Actions du fichier:

export const setDrawerPopOutMenuStatus = { 
    type: 'DRAWER_POPOUT_MENU_STATUS' 
} 

Reducers fichier:

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

Magasin fichier

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 (à partir de fichiers):

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

Enfin Component (ce qui passe à l'état d'un sous-composant):

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

Pourquoi ne pas vous faire l'action en tant que const comme ci-dessous? Également stocker des états en utilisant l'objet pas une seule valeur serait très pratique.

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

Cela rend plus facile à gérer plus tard lorsque le projet est plus grand.