redux - 化简器状态为空
redux - reducer state is blank
我正在尝试复制类似于 redux 文档基本示例中的 TodoList 示例。第二个化简器接收一个数组 - styleItems = [{... ... }, {... ...}]
- 然后调用第一个函数来作用于每个单独的对象。
我通过以下方式提供对应用程序容器的initialState
,如containers/app.js
所示。 但是,传递给styleItems
化简器的状态似乎每次都是空白数组。
但是,react 根据初始配置呈现 UI,而 react 开发工具按预期显示状态结构。 Redux 存储是否以某种方式看到与 react 相同的内容?
容器/应用.js
function starterInfo(state) {
return {
// The ID of this particular object
id: 12345,
// Various keys and theri css values
styleItems: [
{
pk: 31,
order: 1,
label: 'Caption text color',
css_identifier: '.caption-text',
css_attribute: 'color',
css_value: '#FFFFFF'
},
{
pk:23,
order: 2,
label: 'Caption link color',
css_identifier: '.caption-link',
css_attribute: 'color',
css_value: '#FEFEFE'
}
],
// Network state info
currently_fetching: false,
currently_posting: false
}
}
export default connect(starterInfo)(App)
减速器/索引器.js
// This handles a single styleItem object within the array
function change_css(state = {}, action){
switch (action.type){
case actions.CHANGE_CSS:
if (state.order !== action.order){
return state
}
return {
...state,
css_value
}
default:
return state
}
}
// This handles the styles array in the global state
function styleItems(state = [], action){
switch(action.type){
case actions.CHANGE_CSS:
const foobar = state.map(styleItem =>
change_css(styleItem, action)
)
return foobar
default:
return state
}
}
简短的回答是,您没有完全正确地传递初始状态。 React Redux 绑定的 connect
函数的第一个参数是 mapStateToProps
。 此函数的要点是获取应用程序中已存在的状态,并将其映射到组件的 props。 您在starterInfo
函数中所做的只是对组件的状态进行硬编码。 因为你返回的是一个普通对象,所以 React 并不真正知道其中的区别,所以它工作得很好,但 Redux 还不知道你的应用状态。
相反,您应该做的是直接向化简器提供初始状态,如下所示:
const intialStyleItemsState = [
{
pk: 31,
order: 1,
label: 'Caption text color',
css_identifier: '.caption-text',
css_attribute: 'color',
css_value: '#FFFFFF'
},
{
pk:23,
order: 2,
label: 'Caption link color',
css_identifier: '.caption-link',
css_attribute: 'color',
css_value: '#FEFEFE'
}
];
function styleItems(state = intialStyleItemsState, action){ ...
最终,因为您要拆分化简器,所以您需要使用 Redux 的 combineReducers
实用程序将它们再次组合在一起,将根化简器提供给您的商店并从那里开始。
你也可以使用 redux 函数 createstore 传递初始状态,该函数将参数 createStore(reducer, [initialState]) http://rackt.org/redux/docs/api/createStore.html
假设您有两个减速器
change_css(state = {}, action)
function styleItems(state = [], action)
如果您使用 comibneReducer 初始化您的状态
var reducer = combineReducers({
css: change_css,
items: styleItems
})
现在
var store = createStore(reducer)
console.log(store.getState())
您的商店将包含{ css: {}, items: [] }
现在,如果要初始化状态,可以将初始状态作为 createStore 函数的第二个参数传递。
createStore(reducer, {css:{some properties},items:[{name:"obj1"},{name:"obj2"},{name:"obj3"}]})
现在您的存储将包含初始状态。 {css:{some properties,items:[{name:"obj1"},{name:"obj2"},{name:"obj3"}]}
例如,您可以从服务器提供此状态,并将其设置为应用程序的初始状态
- React redux初始化功能,无论状态变化如何
- 设计redux状态树
- 在达到状态之前在Redux Reducer中设置日期格式
- Redux中间件在next()之前更改状态
- 在Redux中链接async和sync操作以计算初始状态
- Universal React/redux未在状态更新时呈现
- reactjs-redux,是否可以有一个由2个组件使用的状态
- 更新Redux状态&然后在同一实例中获取更新状态
- 在 Redux 状态下存储具有原型函数的对象
- redux 中状态对象的结构
- 检查 redux 状态是否更改的简单方法
- React/Redux 状态在第二次操作调用时为空
- 如何同步Redux状态和url哈希标记参数
- 在 React/Redux 中管理同级组件之间的滚动状态
- 当我想对redux容器中的数据进行排序或过滤时,我该如何查看它的状态
- 在Redux中使用组件状态是反模式的吗
- Redux和React-通过@connect保持组件道具与状态同步
- 你能,或者应该在Redux'中使用localStorage吗;s的初始状态
- 状态更改时会不必要地触发Redux操作
- 表示改变状态的函数的Redux字