このエラーに関して、この辺で何かを見つけることができませんでした:
「ストアには有効なリデューサーがありません。combinedReducersに渡される引数が、値がリデューサーであるオブジェクトであることを確認してください。」
私のレデューサー
export default function FriendListReducer(state = {friends : []}, action) {
switch (action.type) {
case 'ADD_FRIEND':
return [
{ friends : action.payload.friend }, ...state.friends
]
default:
return state;
}
return state;
}
コンバイナー
import { combineReducers } from 'redux';
import { FriendListReducer } from './FriendListReducer';
const rootReducer = combineReducers({
friends: FriendListReducer
});
export default rootReducer;
私のストア設定
import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from '../reducers/reducers';
export default function configureStore(initialState = { friends: [] }) {
const logger = createLogger({
collapsed: true,
predicate: () =>
process.env.NODE_ENV === `development`, // eslint-disable-line no-unused-vars
});
const middleware = applyMiddleware(thunkMiddleware, logger);
const store = middleware(createStore)(rootReducer, initialState);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers/reducers', () => {
const nextRootReducer = require('../reducers/reducers').default;
store.replaceReducer(nextRootReducer);
});
}
return store;
}
import
ステートメントが正しくありません。 import { Foo } from 'bar'
とともにexport Foo
を使用するか、またはimport Foo from 'bar'
でエクスポートする場合はexport default Foo
を使用します。
つまり、export default function FriendListReducer
をexport function FriendListReducer
に変更するか、インポートステートメントをimport { FriendListReducer }
からimport FriendListReducer
に変更します。
オブジェクトが空の場合。
export default combineReducers({
})
このエラーが表示されます。
../reducers/reducers?それは奇妙な命名です
とにかく、../reducers/reducersはリデューサーを返さないようです。reducersがディレクトリの場合、index.jsを内部に配置し、各リデューサーをインポートして、ルートリデューサーを作成します
import FriendListReducer from "./FriendListReducer"
const rootReducer = combineReducers({
friendList : FriendListReducer
})
export default rootReducer
あなたの州にはstate.friendListがあります。
私はそれが役立つことを願っています
トップレベルのレデューサー関数がデフォルト値として配列を使用しているようです。 Reduxは、状態の最上部が配列ではなくオブジェクトであることを期待しています。 { friendList : [] }
など、そのオブジェクトの特定のキーに配列を配置してください。