停留在Redux项目上

kzipqqlq  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(260)

我在这个练习中试图实现一个简单的游戏。我是Redux的新手,很难理解有效负载和状态是如何联系在一起的,在这个练习中卡住了。
我仍然不确定是应该更新访问payload属性的状态,还是必须在switch语句中直接返回它。
任何帮助都是非常感谢的。

const initialWagonState = {
  supplies: 100,
  distance: 0,
  days: 0
}

const gather = {
  type:'gather',
  payload: {
  }
}
const travel = {
  type:'travel',
  payload:{
  }
}

const tippedWagon = {
  type:'tippedWagon',
  payload:{
  }
}

const reducer = (state=initialWagonState,action=gather) => {
  switch (action.type) {
    case 'gather':{
      return {
      ...state,supplies:state.supplies + 15,
      ...state,distance: state.distance,
      ...state,days: state.days + 1
      }
    }
    case 'travel':{
      return {
    ...state,supplies: state.supplies - (20 * daysOfTravel),
      ...state,distance: state.distance + (10 * daysOfTravel),
      ...state,days: state.days + daysOfTravel
      }
    }
    case 'tippedWagon':{
      return {
      ...state,supplies:state.supplies - 30,
      ...state,distance:state.distance,
      ...state,days: state.days + 1
      }
    }
    default: {
      return state;
    }
  }
}

let wagon = reducer('travel');
console.log(wagon)
c3frrgcw

c3frrgcw1#

当我们分派分派(gather)或分派({type:'收集',有效负载:任何值})。存储用先前状态和当前动作运行reducer函数,并将返回值保存为新状态。
示例:

const initialWagonState = {
  supplies: 100,
  distance: 0,
  days: 0
}

const reducer = (state=initialWagonState, action) => {
  switch (action.type) {
    case 'gather':{
      return {
      ...state, supplies: state.supplies + action.payload, days: state.days + 1
      }
    }
}

dispatch({type:'gather',payload: 15})

这里,reducer函数接收initialWagonState作为状态,因为我们第一次分派动作,并且reducer函数接收{type:'gather',payload:新更新的状态将是由reducer函数返回的对象。因此,在第一次更新之后,状态将更新为

{
      supplies: 115,
      distance: 0,
      days: 1
    }

让我们分派另一个操作,看看会发生什么

dispatch({type:'gather',payload: 20})

这一次,我们的reducer函数接收{supplies:115、距离:0,天:1}作为状态,{类型:“收集”,有效负载:因此,在第二次更新之后,状态将更新为

{
          supplies: 135,
          distance: 0,
          days: 2
        }

希望能有所帮助
Concepts and Data Flow of Redux
Immutable Update Patterns

tkqqtvp1

tkqqtvp12#

在redux中,你不能直接改变状态,你必须使用纯函数或状态的浅副本,然后返回一个新的状态。相反,尝试使用redux工具包,因为它允许我们直接改变状态。希望这对你有帮助!

相关问题