React JS с Redux не обновляет состояние при сработавшем действии

Question

Я занимаюсь разработкой простого веб-приложения с использованием React JS и Redux. То, что я делаю сейчас, просто обновляет состояние с помощью действий. Но это не работает.

У меня есть такой компонент

@connect((store) => {
    return {
        tweets: store.tweets.tweets
    }
})
class TweetListComponent extends React.Component{

    constructor(props)
    {
        super(props);
        this.props.dispatch(fetchTweets());
        this.state = { tweets : this.props.tweets };
    }

    render()
    {
        var todos = this.state.tweets.map((item, index)=>{
            return <li>{item}</li>;
        })
        return (
        <div>
            <h3>Tweet List</h3>
            <ul>
            {todos}
            </ul>
        </div>  
        );
    }

}

module.exports = TweetListComponent; 

Как вы можете видеть в конструкторе, я вызываю функцию fetchTweets (), которая является импортированным действием Redux. Затем получить свойство твитов состояния TweetsReducer.

Это определение твиттера.

export default function reducer(state={
    tweets : [ "this is default" ]
}, action){
    switch(action.type)
    {
        case 'FETCH_TWEETS': {
            return { tweets: ["How", "are", "you", "doing"] };
        }
    }
    return state;
}

Согласно моему коду, он должен отображать этот массив, ["How", "are", "you", "working"], потому что я снова вызвал действие fetchTweets в конструкторе, чтобы обновить значение. Но он все еще рендерит этот массив, ["это по умолчанию"]. Как я могу решить проблему?

Answer 1

Проблема в том, что вы устанавливаете состояние на основе реквизитов в конструкторе, который вызывается только один раз, и хотя вы отправляете действие в конструкторе для получения твитов, новые обновленные твиты не сразу доступны. Вы должны напрямую использовать tweets из реквизита, а не копировать его в состояние, поскольку установка состояния, непосредственно получаемого из реквизита, является антипаттерном

class TweetListComponent extends React.Component{

    constructor(props)
    {
        super(props);
        this.props.dispatch(fetchTweets());
    }

    render()
    {
        var todos = this.props.tweets.map((item, index)=>{
            return <li>{item}</li>;
        })
        return (
        <div>
            <h3>Tweet List</h3>
            <ul>
            {todos}
            </ul>
        </div>  
        );
    }

}

Answer 2

Использование должно быть как

@connect((store) => {
    return {
        tweets: store.tweets.tweets
    }
}, {
   fetchTweets
})

А в компоненте используйте его как

componentDidMount() {
  this.props.fetchTweets();
}

Также напрямую используйте твиты из реквизита, не храните его в state. Вы не обновляете state при изменении props