javascript - 没有为键 {name} 提供减速器

Question

我已经建立了我的 redux 商店，一切似乎都很好，所有导入和导出对我来说似乎都是正确的，但我似乎没有有效的减速器和 sagas。被卡住了，我做错了什么？

我收到此错误消息

我有一个文件结构如下的商店

店铺

• configStore.js
• index.js

import { applyMiddleware, compose, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../components/rootReducer';

export default function configureStore(initialState) {
    const sagaMiddleware = createSagaMiddleware();
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    return {
        ...createStore(
            rootReducer,
            initialState,
            composeEnhancers(applyMiddleware(sagaMiddleware)),
        ),
        runSaga: sagaMiddleware.run,
    };
}

import configureStore from './configStore';
import rootSaga from '../components/rootSaga';

const store = configureStore({});
store.runSaga(rootSaga);

export default store;

根佐贺

import { all } from 'redux-saga/effects';

import planets from './planets';

export default function* rootSaga() {
    yield all([
        planets.sagas(),
    ]);
}

根减速器

import { combineReducers } from 'redux';

import planets from './planets';

export default combineReducers({
    planets: planets.reducers,
});

在我的组件中，我有

减速器.js

import { UPDATE_PLANETS, LOAD_PLANETS } from './actionTypes';

const initialState = {
    isPlanetsLoading: false,
    planets: [],
};

export default (state = initialState, { type, payload }) => {
    switch (type) {
        case LOAD_PLANETS:
            return {
                ...state,
                isPlanetsLoading: true,
            };
        case UPDATE_PLANETS:
            return {
                ...state,
                isPlanetsLoading: false,
                planets: payload,
            };
        default:
            return state;
    }
};

行星.js

import { List } from "antd";
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { requestPlanets } from '../actions';

const Planets = () => {
  const dispatch = useDispatch();

  const { planets } = useSelector(
    (state) => state.planets
  );
  console.log(planets);

  useEffect(() => {
      dispatch(requestPlanets());
  }, [dispatch, planets]);
// return statement
};

export default Planets;

标签： javascriptreactjsreduxreact-redux

Answer 1

1. createStore返回商店。所以不要传播。只需将 createStore 的输出关联到一个对象属性，比如 store。
2. 在 index.js 中，解构 configStore 对象{ store, runSaga }

配置存储

export default function configureStore(initialState) {
    const sagaMiddleware = createSagaMiddleware();
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    return {
        store: createStore(
            rootReducer,
            initialState,
            composeEnhancers(applyMiddleware(sagaMiddleware)),
        ),
        runSaga: sagaMiddleware.run,
    };
}

index.js

import configureStore from './configStore';
import rootSaga from '../components/rootSaga';

const { store, runSaga } = configureStore({});
runSaga(rootSaga);


export default store;