initは還元状態を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

self.setState（{タイプ： 'ADD_TODO'}）関数ではありません。 イニシャルレデューサーはありません！どうして ？

減速コード：

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

あなたは派遣とあなたのcomponentからのアクションとreducerにあなたの状態を変更する必要があります。

簡単な例：

コンポーネント：

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

リデューサー：

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

注： ので、直接あなたのコンポーネントからのアクションはIMOそれは現実世界のアプリのために本当に最適ではない送信コンポーネントを結合します。代わりにcontainersを使用してアプリをデカップリングすることを検討してください。 An interesting article。