R
R
ravshan selimov2020-08-06 19:12:47
React
ravshan selimov, 2020-08-06 19:12:47

How to use combineReducers redux?

Hello everyone,
I didn’t fully understand how to use combineReducers in redux.
Read documentation, googled.
I understand most of it, but it throws an error

Unexpected keys "checkLogged", "isLogged", "user", "isAdmin", "lotteries", "categories", "tickets"
found in preloadedState argument passed to createStore.
Expected to find one of the known reducer keys instead: "authorizationReducer", "userReducer", "categoriesReducer", "adminCategoriesReducer", "adminTicketsReducer".
Unexpected keys will be ignored.


all I understood is that my properties (initial state) are not transferred to
the code :

store.js
import {createStore} from 'redux';
import reducer from './reducers/rootReducer.js';


const initialState = {
  
  checkLogged : false, 
  isLogged    : false,
  user        : false,
  isAdmin     : false,

  lotteries   : {},
  categories  : {},
  tickets     : {}

}

const store = createStore(reducer, initialState);

export default store;


rootReducer.js
import {combineReducers} from 'redux';


import authorizationReducer from './authorization/authorizationReducer.js';
import userReducer          from './profile/userReducer.js';
import categoriesReducer    from './lotteries/categoriesReducer.js';
import ticketsReducer       from './tickets/ticketsReducer.js';


import adminCategoriesReducer from './admin/lotteries/categoriesReducer.js';
import adminTicketsReducer    from './admin/tickets/ticketsReducer.js';




const reducer = combineReducers({
  authorizationReducer,
  userReducer,
  categoriesReducer,
  ticketsReducer,

  adminCategoriesReducer,
  adminTicketsReducer
  
})

export default reducer;


example of a reducer (sub-reducer)
./ticketsReducer
function reducer(state, action){
  
  switch (action.type) {


    case 'EDIT_TICKET_PRICE' : {

      return{
        ...state,

        tickets : {
          ...state.tickets,
          [action.name] : action.ticket
        }

      }

    }
    
    default : return state


  }

}

export default reducer;


Did I do it right

Answer the question

In order to leave comments, you need to log in

2 answer(s)
R
ravshan selimov, 2020-08-07
@ravshan01

I couldn’t understand it properly, so I wrote my own function that combines reducers.
the function itself

function createRootReducer(reducers){

  return function(state, action){


    for (let i = 0; i < reducers.length; i++){

      let newState = reducers[i](state, action);
      if ( isEmpty(newState) == false ) return newState; 

    }
    

    return state;

  }

}

initialization
const reducer = createRootReducer([
  //reducers array
])

I
Islam Ibakaev, 2020-08-07
@devellopah

initial state

const initialState = {auth: {}, lotteries:{}, categories: {}, tickets:{}}

reduce the number of reducers to 4 (one for each piece of state)
const reducer = combineReducers({ auth, lotteries, categories, tickets})

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question