困在Redux项目上

Question

我在这个练习中试图实现一个简单的游戏。我是redux的新手，很难理解有效载荷和状态是如何联系在一起的，并在这个练习中陷入了困境。

我仍然怀疑是否应该更新访问有效负载属性的状态，或者是否必须直接在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)

Answer 1

当我们调度像dispatch(聚集(或dispatch这样的操作时(｛type:'collecte'，payload:any value｝(。存储将使用以前的状态和当前操作运行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作为状态，因为我们第一次调度操作，reduce函数接收{type:'gather'，payload:15}作为操作。最新更新的状态将是reducer函数返回的对象。因此，在第一次更新后，状态将像一样更新

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

让我们调度另一个操作，看看会发生什么

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

这一次，我们的reducer函数接收{supply:115，distance：0，days:1}作为状态，接收{type:'gather'，payload:20}作为有效载荷。因此，在第二次更新后，状态将像一样更新

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

希望它能帮助

Redux 的概念和数据流

不可变更新模式

Answer 2

在redux中，不能直接更改状态，必须使用纯函数或状态的浅拷贝，然后返回新状态。相反，尝试使用redux工具包，因为它允许我们直接更改状态。希望这能有所帮助！