Comment init change redux état de componentDidMount?

Question

componentDidMount(){ 
    var self = this; 

    //selt.props is undefined too from this point !!!! WHY 
    // this.props.addTodo(); 

    window.onscroll = function(){ 

     //self.setState({ type:'ADD_TODO' }); 
     // debugger 
     self.props.addTodo('param') 
    } 


} 



function mapStateToProps (state) { 
    return { 
     todos: state 
    }; 
} 

function mapDispatchToProps (dispatch, ownProps) { 



    return { 

     addTodo: function(text){ 
      dispatch({type: 'ADD_TODO', text: text, id: ++_idSeq}); 
     } 

    } 

} 

self.props.addTodo est pas une fonction

self.setState ({type: 'ADD_TODO'}); ne pas init réducteur! Pourquoi ?

Code réducteur:

function todoReducer (currentState, action) { 
    currentState = currentState || {}; // Initial State 
    // debugger 
    console.log('reducer!'); 
    switch (action.type) { 
     case 'ADD_TODO': 
      debugger 
      let newTodo = {id:1}; 
      return Object.assign({}, currentState, newTodo); 



     default: 
      return currentState; // TODO: Always return the state 
    } 
} 



// Create Store 
var todoStore = createStore(todoReducer); 

let unsubscribe = todoStore.subscribe(() => console.log(todoStore.getState())) 

window.store = todoStore; 




var TodoListContainer = connect(mapStateToProps, mapDispatchToProps)(TodoList); 

Answer 1

Vous devez expédier et de l'action de votre component et changer votre état dans le reducer.

Exemple simple:

Composant:

componentWillMount() { 
    store.dispatch({ type: 'YOUR-ACTION', payload: 'yourValue' }) 
} 

Réducteur:

function app(state = initialState, action) { 
    switch (action.type) { 
    case 'YOUR-ACTION': 
     // change your state here 
    default: 
     return state 
    } 
} 

Remarques: envoyant directement des actions de votre composant l'OMI, il est pas vraiment optimale pour les applications du monde réel, parce que vous couplez vos composants. Considérez plutôt utiliser containers et découpler votre application plus. .