reducers 如何更新 store
How reducers update the store
我是 Redux 的新手,我在理解 reducer 的概念时发现了一些问题,
我可以看到许多示例显示它采用当前状态和 return 更新状态,
我的问题是它如何通过 returning 新状态更新商店(我发现很难理解该机制),
谁能给我解释一下。
这是我在学习相同概念时发现非常有用的图像。
调度
当您分派任何函数时,它会转到所有 reducer,如果分派类型匹配,它将更改该 reducer 的状态。
functionName:()=>(dispatch)({type:'some-thing-to-match',payload})
减速器
处理状态变化。
商店
所有减速器的组合(根减速器)。
const store = combineReducers({
Reducer1:r1,
Reducer2:r2,
Reducer3:r3
})
例如,采用与 r1 匹配的 TodoList 中的调度函数,并通过从 'react-redux' 连接更改其 state.Then 我们将把 reducer 状态连接到 TodoList。
var mapStateToProps = state=>{
return:{
r1:r1
}
}
然后反应将对状态的任何变化作出反应。如果 r1 的状态发生变化,那么它将更新该组件。
您的问题是如何通过 returning 状态更新商店。您的 reducer 将获取存储(状态)并用作输入,并根据功能和 return 要存储的状态更改存储。
然后我们可以将我们的组件连接到该商店以捕获其中的任何变化。
As we can see in image. Dispatch will change the store's state.Then
you can import(connect) that reducer to see the changes in your
component.(here TodoItem is that component)
Redux store 只是一个保存应用程序所有状态的对象。 reducer 是更新 store 的唯一方式。
reducer 是一个纯函数,它接受一个旧状态 returns 一个新状态。在 reducer 中,我们需要做的是我们只提供当前存储的旧状态,然后提供我们将要更改状态的新状态。 reduce函数的详细解释可以参考this
简而言之,reducer 将现有状态对象更新一些 属性 通过 reducer 函数和 returns 新对象状态。
下面link有更好的解释。这是一个非常好的博客,如何创建你自己的 redux。您将准确了解 redux 商店中发生的情况。
实际上这是我遗漏的关于减速器的部分,我没有抓住的部分是减速器输出必须分配给存储 属性
let Action={type:'SET_VISIBILITY_FILTER',text: 'test pay load'}
//Invoking Reducer
let store=todoApp({},Action)
//Reducer
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
message: action.text
})
default:
return state
}
}
我是 Redux 的新手,我在理解 reducer 的概念时发现了一些问题, 我可以看到许多示例显示它采用当前状态和 return 更新状态, 我的问题是它如何通过 returning 新状态更新商店(我发现很难理解该机制), 谁能给我解释一下。
这是我在学习相同概念时发现非常有用的图像。
调度
当您分派任何函数时,它会转到所有 reducer,如果分派类型匹配,它将更改该 reducer 的状态。
functionName:()=>(dispatch)({type:'some-thing-to-match',payload})
减速器 处理状态变化。
商店 所有减速器的组合(根减速器)。
const store = combineReducers({
Reducer1:r1,
Reducer2:r2,
Reducer3:r3
})
例如,采用与 r1 匹配的 TodoList 中的调度函数,并通过从 'react-redux' 连接更改其 state.Then 我们将把 reducer 状态连接到 TodoList。
var mapStateToProps = state=>{
return:{
r1:r1
}
}
然后反应将对状态的任何变化作出反应。如果 r1 的状态发生变化,那么它将更新该组件。
您的问题是如何通过 returning 状态更新商店。您的 reducer 将获取存储(状态)并用作输入,并根据功能和 return 要存储的状态更改存储。
然后我们可以将我们的组件连接到该商店以捕获其中的任何变化。
As we can see in image. Dispatch will change the store's state.Then you can import(connect) that reducer to see the changes in your component.(here TodoItem is that component)
Redux store 只是一个保存应用程序所有状态的对象。 reducer 是更新 store 的唯一方式。
reducer 是一个纯函数,它接受一个旧状态 returns 一个新状态。在 reducer 中,我们需要做的是我们只提供当前存储的旧状态,然后提供我们将要更改状态的新状态。 reduce函数的详细解释可以参考this
简而言之,reducer 将现有状态对象更新一些 属性 通过 reducer 函数和 returns 新对象状态。
下面link有更好的解释。这是一个非常好的博客,如何创建你自己的 redux。您将准确了解 redux 商店中发生的情况。
实际上这是我遗漏的关于减速器的部分,我没有抓住的部分是减速器输出必须分配给存储 属性
let Action={type:'SET_VISIBILITY_FILTER',text: 'test pay load'}
//Invoking Reducer
let store=todoApp({},Action)
//Reducer
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
message: action.text
})
default:
return state
}
}