Question

Action如何更新多个不同的Reducers？我该如何实现？

更新：

这是我在./actions/sync.js中的操作。此操作定期连接到外部API并从Sync Component调用。

export function syncFetch(response) {
    return {
        type: 'SYNC_FETCH',
        response
    }
}

export function syncFetchData(url) {
    return (dispatch) => {
        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                return response;
            })
            .then((response) => response.json())
            .then((sync) => updateAll(sync))
            .catch(() => console.log('error'));          
    };
}

const updateAll = (params) => {
    return dispatch => {
        dispatch({type: 'SYNC_FETCH', payload: params})
    }
}

和./reducers/sync.js

const initialState = [];

export default (state = initialState, action) => {
    switch(action.type) {
        case 'SYNC_FETCH':
            return action.response;

        default:
            return state;
    }
}

我没有错误，但数据没有更新。我的代码中有什么问题？

Answer 1

每个动作都被发送给所有减速器，减速器可以决定是否希望使用动作更新某些动作

你想要的是

const updateAll = params => {
    return {type: 'UPDATE_PARAMS', payload: params}
}

然后在不同的缩减器中使用它，如

const newReducer = (state= initialState, action) => {
   switch(action.type) {
      case 'UPDATE_PARAMS': return {
         ...state,
         // do some things here
      }
      ...
      default: return state;
   }
}

const userReducer = (state= initialState, action) => {
   switch(action.type) {
      case 'UPDATE_PARAMS': return {
         ...state,
         // do some things here
      }
      ...
      default: return state
   }
}

Answer 2

这样做的一种方法可能是解雇批量操作。所以你可以有三个不同的动作，每个减速器一个，并有一个主要动作，随后处理所有这三个（或只是在第一个下添加两个动作）。这可以通过使用thunk（thunk middleware）来完成。做一些事情，假设他们是异步的：

const updateAllNewsStuff = newsParam => {
  return dispatch => {
    dispatch(newsAction(newsParam))
    dispatch(userAction(newsParam))
    dispatch(notifyAction(newsParam))
  }
}

您可能还可以查看此插件以解除批量操作： https://github.com/tshelburne/redux-batched-actions

Answer 3

在redux 7.1中，您可以利用batch API在一次重新渲染中分派所有动作。在docs中，您可以执行以下操作：

import { batch } from 'react-redux'

function myThunk() {
  return (dispatch, getState) => {
    // should only result in one combined re-render, not two
    batch(() => {
       dispatch(newsAction(newsParam))
       dispatch(userAction(newsParam))
       dispatch(notifyAction(newsParam))
    })
  }
}

React-Redux动作更新多个Reducers

3 个答案: