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，我可以看到他们登录到控制台。

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

提前谢谢！

更新1：这是我的reducer的代码

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

问题很简单 TYPO ：操作的名称与Reducer中的名称不匹配。

您可以看到我正在发送QUESTION_FETCH_FAIL和QUESTION_FETCH_SUCCESS，但处理QUESTIONS_FETCH_FAIL和QUESTIONS_FETCH_SUCCESS。

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

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

特别感谢：@ OB3注意拼写错误

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

1 个答案: