Question

我正在尝试更新redux存储，但是当我尝试访问这两个点和sessionId时，它们会返回undefined。我确信我的减速机存在问题，但我无法弄明白。任何帮助将不胜感激。

这是我的减速机：

import { UPDATE_POINTS, SET_SESSION } from '../path'

const initialState = {
    sessionId: null,
    points: []
}

export default (state = initialState, action) => {
    switch (action.type) {
        case UPDATE_POINTS:
            return {
                points: action.points
            }
        case SET_SESSION:
            return {
                sessionId: action.session
            }
        default:
            return state;
   }
}

修改

动作创作者

export function updatePoints(points){
    return {
        type: UPDATE_POINTS,
        points
    }
}

export function setSession(session){
    return {
        type: SET_SESSION,
        session
    }
}

在React Component中（为简单起见，我从这个函数中取出了大部分内容）

handleSelect(e) {
    this.props.setSession(e);
    console.log(this.props.sessionId);
}

从下拉菜单中选择菜单项时使用此功能。在第一个选择中，控制台显示sessionId处于初始状态的任何内容。任何进一步的下拉选择都会导致控制台中的未定义。

Answer 1

你非常接近。 redux中的reducer需要返回整个状态的新副本。你的reducer只返回它所关注的密钥，这将丢弃另一个密钥。您需要在更新密钥的情况下返回状态的新副本。例如：

const initialState = {
  sessionId: null,
  points: []
}

export default (state = initialState, action = null) => {
  // Exit early if you don't have an action (returning old state) 
  if (!action) return state;

  // This function will assign your patch onto the old state, and then 
  // assign all of that onto a NEW object. For redux to do it's job,
  // you can't modulate the old object, you have to return a new one.
  const update = patch => Object.assign({}, state, patch);

  switch (action.type) {
    case UPDATE_POINTS:
      return update({
        points: action.points
      });

    case SET_SESSION:
      return update({
        sessionId: action.session
      });

    default:
      return state;
  }
}

并且为了记录，不是每次在您的操作创建者中将数据有效负载置于唯一键下，如果您将有效负载置于data键下，那么您的操作将遵循标准的磁通操作格式。 / p>

export const updatePoints = (points) => ({
  type: UPDATE_POINTS,
  data: points
});

export const setSession = (session) => ({
  type: SET_SESSION,
  data: session
});

你去吧。祝你好运，如果你遇到困难，请参阅Redux文档（它们真的很棒）。 Link to Redux Docs

更新Redux商店

1 个答案: