Phản ứng Redux chính bất ngờ thông qua để tạo ra cửa hàng

Question

Tôi nhận được lỗi Unexpected key "characters" found in initialState argument passed to createStore. Expected to find one of the known reducer keys instead: "marvelReducer", "routing". Unexpected keys will be ignored.

rootReducer:

import { combineReducers } from 'redux'; 
import { routerReducer } from 'react-router-redux'; 
import marvelReducer from './marvelReducer'; 

const rootReducer = combineReducers({ 
    marvelReducer, 
    routing: routerReducer 
}); 
export default rootReducer; 

marvelReducer:

import { FETCH_MARVEL } from '../constants/constants'; 
import objectAssign from 'object-assign'; 

export default function marvelReducer(state = [], action) { 
    switch (action.type) { 
    case FETCH_MARVEL: 
     return objectAssign({}, state, {characters: action.data}); 

    default: 
     return state; 
    } 
} 

cửa hàng:

import { createStore } from 'redux'; 
import { syncHistoryWithStore } from 'react-router-redux'; 
import { browserHistory } from 'react-router'; 

import rootReducer from '../reducers/index'; 

const initialState = { 
    characters: [] 
}; 

const store = createStore(rootReducer, initialState); 

export const history = syncHistoryWithStore(browserHistory, store); 

if (module.hot) { 
    module.hot.accept('../reducers/',() => { 
    const nextRootReducer = require('../reducers/index').default; 
    store.replaceReducer(nextRootReducer); 
    }); 
} 

export default store; 

tôi có mã rất giống nhau trong một ứng dụng khác và nó hoạt động tốt. Bạn không chắc chắn những gì đang xảy ra ở đây

Answer 1

Có sự không phù hợp nhỏ giữa những gì bạn đặt làm trạng thái ban đầu của cửa hàng và những gì bạn yêu cầu cửa hàng mong đợi trạng thái ban đầu của cửa hàng sẽ như thế nào, ví dụ: - cập nhật trạng thái ban đầu của bạn thiết lập cho các cửa hàng như vậy:

const initialState = { 
    marvel: { 
    characters: [] 
    } 
}; 

Và cũng có thể nó là một ý tưởng tốt để đặt tên cho người biến cây tiểu bang của bạn để tên có ý nghĩa không chứa giảm trong họ, vì vậy cập nhật

const rootReducer = combineReducers({ 
    marvelReducer, 
    routing: routerReducer 
}); 

to

const rootReducer = combineReducers({ 
    marvel: marvelReducer, 
    routing: routerReducer 
}); 

Và điều đó sẽ làm điều đó cho bạn.

Hy vọng điều này sẽ giúp,

PS. một số tài liệu.

Từ the docs:

Nếu bạn sản xuất giảm với combineReducers, đây phải là một đối tượng đơn giản với hình dạng giống như các phím được truyền cho nó. Nếu không, bạn được tự do để vượt qua bất cứ điều gì mà bộ giảm tốc của bạn có thể hiểu được.

Nếu bạn không cần phải xử lý bất kỳ hành động liên quan đến one hoặc two, chỉ cần kéo chúng vào ban đầu, đây có thể đơn giản như

export default combineReducers({ 
    events, 
    flash, 
    one: (state = {}) => state, 
    two: (state = {}) => state 
}) 

Answer 2

Từ documentation cho combineReducers:

Chức năng combineReducers helper biến một đối tượng có giá trị là chức năng giảm khác nhau vào một chức năng giảm duy nhất bạn có thể chuyền qua createStore.

Bộ giảm tốc kết quả gọi mỗi bộ giảm tốc con, và tập hợp các kết quả của chúng thành một đối tượng trạng thái duy nhất. Hình dạng của đối tượng trạng thái khớp với các phím của số reducers được chuyển.

Nói tóm lại, gia giảm của bạn được cấu hình để xử lý tình trạng theo hình thức

{ 
    marvelReducer, 
    routing 
} 

Nhưng bạn đang trao cho nó một trạng thái ban đầu theo hình thức

{ 
    characters 
} 

Để sửa lỗi này vấn đề, bạn sẽ phải thay đổi các phím của đối tượng bạn chuyển đến combineReducers để bao gồm characters hoặc thay đổi trạng thái ban đầu để chứa các khóa mà bộ giảm tốc của bạn đang mong đợi.

Answer 3

Tôi có cùng một vấn đề, và tôi không thể theo logic của bất kỳ giải pháp tiềm năng nào.

Đối số kết hợpReducers là tham chiếu để giảm thiểu đối tượng, không phải trạng thái, khóa. Lỗi chính là khó hiểu như hầu hết các lỗi redux khác, và thực sự hầu hết các câu trả lời hoặc các giải pháp tiềm năng được cung cấp cho họ.