Redux：区分reducer中的对象

Question

我对Redux很新，根据我的理解，应该为每种类型的对象创建一个reducer。例如。对于用户交互，应创建用户缩减器。 我的问题是：您如何处理需要将对象用于不同目的的案例？

场景：想象一下，有一个用户reducer返回当前用户。整个应用程序中都需要此用户，并且需要在每个页面上进行常规控制。

现在当你需要加载另一个用于不同目的的用户时会发生什么。例如。个人资料页面：加载用户以显示信息。

在这种情况下，如果使用用户减速器，则会发生冲突。在Redux中处理这个问题的正确方法是什么？如果必须创建不同的减速器，那么新减速器的命名约定是什么？

Answer 1

首先，你提到过：

  

加载当前用户的用户缩减器

我不知道我是否正确使用了您，但如果这意味着您想要（例如，从API）获取reducer中的当前用户，这是一种错误的方法。

Reducers旨在pure functions。您可以多次使用相同的参数调用它们，它们将始终返回相同的预期状态。

这样的副作用应由action creators处理，例如：

操作/ user.js的

export const FETCH_ME = 'FETCH_ME'
export const FETCH_ME_SUCCESS = 'FETCH_ME_SUCCESS' 

// it's using redux-thunk (withExtraArgument: api) module to make an async action creator
export const fetchMe = () => (dispatch, getState, api) => {
  dispatch({ type: FETCH_ME })
  return api.get('/users/me').then(({ data }) => {
    dispatch({ type: FETCH_ME_SUCCESS, data })
    return data
  })
}

在reducer中，您可以简单地获取数据并设置新状态（请注意，如果您多次发送具有相同数据的操作，则状态将始终相同）。

<强>减速器/ user.js的

import { FETCH_ME, FETCH_ME_SUCCESS } from '../actions/user'

const initialState = {
  item: null,
  loading: false
}

export const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_ME:
      return {
        ...state,
        loading: true
      }
    case FETCH_ME_SUCCESS:
      return {
        ...state,
        loading: false,
        item: action.data
      }
    default:
      return state
  }
}

现在，针对您的情况：

  

现在当你需要加载另一个用于不同目的的用户时会发生什么。例如。个人资料页面：加载用户以显示信息。

您将为此写下另一个动作创建者：

操作/ user.js的

export const FETCH_ME = 'FETCH_ME'
export const FETCH_ME_SUCCESS = 'FETCH_ME_SUCCESS' 
export const FETCH_USER = 'FETCH_USER'
export const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS'

export const fetchMe = () => (dispatch, getState, api) => {
  dispatch({ type: FETCH_ME })
  return api.get('/users/me').then(({ data }) => {
    dispatch({ type: FETCH_ME_SUCCESS, data })
    return data
  })
}

export const fetchUser = (id) => (dispatch, getState, api) => {
  dispatch({ type: FETCH_USER })
  return api.get(`/users/${id}`).then(({ data }) => {
    dispatch({ type: FETCH_USER_SUCCESS, data })
    return data
  })
}

然后您调整减速器以管理更多套件：

<强>减速器/ user.js的

import { combineReducers } from 'redux'
import { FETCH_ME, FETCH_ME_SUCCESS, FETCH_USER, FETCH_USER_SUCCESS } from '../actions/user'

const initialState = {
  item: null,
  loading: false
}

const meReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_ME:
    case FETCH_ME_SUCCESS:
      return userReducer(state, action)
    default:
      return state
  }
}

const activeReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_USER:
    case FETCH_USER_SUCCESS:
      return userReducer(state, action)
    default:
      return state
  }
}

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_USER:
    case FETCH_ME:
      return {
        ...state,
        loading: true
      }
    case FETCH_USER_SUCCESS:
    case FETCH_ME_SUCCESS:
      return {
        ...state,
        loading: false,
        item: action.data
      }
    default:
      return state
  }
}

export default combineReducers({
  activeUser: activeReducer,
  me: meReducer
})

您的最终用户状态应为：

{
  me: {
    item: null,
    loading: false
  },
  active: {
    item: null,
    loading: false
  }
}