redux docs' basic exampleの TodoList の例に似たものを複製しようとしています。2 番目のレデューサーは配列を受け取ります - styleItems = [{... ... }, {... ...}]
- そして、最初の関数を呼び出して個々のオブジェクトのそれぞれに作用します。
initialState
に示すように、次の方法でアプリ コンテナーにを提供しcontainers/app.js
ます。ただし、styleItems
レデューサーに渡される状態は、毎回空の配列のようです。
ただし、react は初期構成に基づいて UI をレンダリングし、react dev-tools は期待どおりの状態構造を示します。reduxストアはどういうわけか反応するのと同じものを見ていますか?
コンテナー/app.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)
レデューサー/index.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
}
}