仅使用一次 redux-thunk 更新组件分派多个操作

Question

我正在使用 redux-thunk 从组件中的一次调度中调度多个操作。

export function fetchQuestions() {
  return function(dispatch, getState) {
    dispatch({type: "QUESTION_FETCH_PENDING"});
    axios.get(`http://${API_ROOT}/api/questions/list`, {
        headers: {'JWT': getState().users.token}
    })
    .then((response) => {               
        //if registration is successful tell it to reducer and authorize user
        dispatch({type: "QUESTION_FETCH_SUCCESS", payload: response});
    })
    .catch((err) => {
        if (err.response.data == "login") {
            dispatch(unauthorizedRequest());
        }

        dispatch({
            type: "QUESTION_FETCH_FAIL",
            payload: err
        });
    });
  }
}

问题是我希望在包装分派内的每个分派上更新组件。他们都进入 reducer，我可以看到他们登录到控制台。

但这并没有发生，组件只会在第一次调度后更新。可以看到，每次render()调用时调用的"FEED RENDER"消息，剩余派发后不再调用。

提前致谢！

更新 1：这是我的减速器的代码

export default function reducer(state={
questions: [],
questionPending: false,
questionSuccess: false,
questionFetching: false,
questionFetched: false,
error: null
}, action) {
    switch(action.type) {
        case "QUESTIONS_FETCH_PENDING": {
            return {...state, questionFetching: true, questionFetched: false}
        }
        case "QUESTIONS_FETCH_SUCCESS": {
            return {...state, questionFetching: false, questionFetched: true, questions: action.payload}
        }
        case "QUESTIONS_FETCH_FAIL": {
            return {...state, questionFetching: false, questionFetched: false, error: action.payload}
        }
        case "QUESTION_ADD_PENDING": {
            return {...state, questionPending: true, questionSuccess: false}
        }
        case "QUESTION_ADD_SUCCESS": {
            return {...state, questionPending: false, questionSuccess: true}
        }
        case "QUESTION_ADD_FAIL": {
            return {...state, questionPending: false, questionSuccess: false}
        }
    }

    return state;
}

为了注入商店，我只使用 @connect 装饰器：

@connect((store) => {
return {
        questions: store.questions,
        isAuth: store.users.isAuth
    };
})

有问题的组件：

export default class Feed extends React.Component {

componentWillMount() {
    this.props.dispatch(fetchQuestions());
}

componentWillUpdate() {
    console.log(this.props);
    if (!this.props.isAuth) {
        this.props.router.push('/auth');
    }
}

logout() {
    this.props.dispatch(logoutUser());
}

render() {
    console.log("FEED RENDER!");

    let questions = this.props.questions.questions.map((question) => {<questionFeed question={question}/>});

    return (
        <div>
            <button onClick={this.logout.bind(this)}>LOGOUT</button>
            THIS IS FEED!
        </div>
    );
  }
}

Answer 1

问题很简单错字：动作的名称与 reducer 中的名称不匹配。

你可以看到我正在调度 QUESTION_FETCH_FAIL 和 QUESTION_FETCH_SUCCESS，但处理 QUESTIONS_FETCH_FAIL 和 QUESTIONS_FETCH_SUCCESS。

解决方案：根据 redux 的最佳实践，您应该始终将操作名称存储在变量中并与 reducer 共享。

注意：不要和我一样误会，控制台中记录的操作并不意味着它已经到达减速器

特别感谢：感谢@OB3 指出打字错误

仅使用一次 redux-thunk 更新组件分派多个操作

Dispatching multiple actions using redux-thunk updates component only once

reactjs

react-redux

redux-thunk