DWQA QuestionsCategory: ProgramError in Redux persist merge reducer
liuyang asked 2 months ago

Problem description
Error information:

Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

The environmental background of the problem and what methods have you tried
I put the reducers with different functions in different folders, and then use Redux persist for data persistence. Do web projects refresh frequently, so I want to ensure that the data in the store will not be lost. However, the method of combining reducers with combinereducers is to report an error. I don’t know why
Related codes
//Please paste the code text below (do not replace the code with pictures)
reducer

import * as Pages from './action-types';

let defaultValue = {
    user_name: "",
    user_id: ""
}

export default function UserInfo (state = defaultValue, action = {}) {
    switch (action.type) {
        case Pages.SAVEUSERINFO:
            return { ...state,
                ...{
                    user_name: action.data.data.username,
                    user_id: action.data.data.id
                }
            };
        default:
            return state;
    }
}

Merge location

import {
    combineReducers,
} from 'redux';
import UserInfo from './Pages/reducers';
import SaveInfo from './Layout/reducers';


const rootReducer = combineReducers({ 
    UserInfo,
    SaveInfo
});

export default rootReducer;

Entry file

import {
    Provider
} from 'react-redux';
import {
    createStore,
    applyMiddleware
} from 'redux';
//This reducer is my merged reducer
import Reducers from '@/Reducers';
import thunk from 'redux-thunk';
import {persistStore, persistCombineReducers} from 'redux-persist';
import { PersistGate } from 'redux-persist/es/integration/react';

import storage from 'redux-persist/es/storage'
const config = {
    key: 'root',
    storage,
};

function configureStore(){
    console.log(Reducers)
    let reducer = persistCombineReducers(config, Reducers);
    let store = createStore(reducer, applyMiddleware(thunk));
    let persistor = persistStore(store);
    return { persistor, store }
}
const render = Component => {
    const { persistor, store } = configureStore();
    ReactDOM.render(
        //Binding Redux, hot loading
        <Provider store={store}>
            <PersistGate persistor={persistor}>
                <Component />
            </PersistGate>
        </Provider>,
        document.getElementById('app'),
    )
}

What are the results you are looking forward to? What is the actual error message?
It is expected that no matter how the browser is refreshed, the data in the store before the refresh can be saved until after the refresh

lucifer replied 2 months ago

In your configurestore console.log What is the output value of (reducers) when running?

lucifer replied 2 months ago

combination() {
var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var action = arguments[1];

if (shapeAssertionError) {
throw shapeAssertionError;…

lucifer replied 2 months ago

Yes, it seems that the method of persistcombinedreducers has been abandoned by the government or I am not using it correctly. The official use persistreducer to merge reducers and then pass it to the store. Thank you

2 Answers
liuyang answered 2 months ago

I don’t know whether the method of persistcombinereducers is used incorrectly or abandoned by the official authorities. If you look at the document, you can use the persistreducer method to merge the config and reducer to complete the implementation

import { persistStore, persistReducer } from 'redux-persist';
const persistedReducer = persistReducer(persistConfig, Reducers)
function configureStore(){
    let store = createStore(persistedReducer, applyMiddleware(thunk));
    let persistor = persistStore(store);
    return { persistor, store }
}
const render = Component => {
    const { persistor, store } = configureStore();
    ReactDOM.render(
        //Binding Redux, hot loading
        <Provider store={store}>
            <PersistGate persistor={persistor}>
                <Component />
            </PersistGate>
        </Provider>,
        document.getElementById('app'),
    )
}

Which God if you have specific problems, please tell me, thank you very much

lady gaga answered 2 months ago

When you insert persist Middleware in this way, the action in the source code will report an error: cannot read property ‘type’ of undefined
What’s the situation? I wrote the global store, right?

liuyang replied 2 months ago

Visual inspection may be that your type is not defined or not passed in. You can paste the relevant code, or call the upper console of type