Search code examples
reactjsreduxredux-toolkit

how to import reducer to store.js from createSlice @reduxjs/toolkit


how to export todos reducer from todosSlice by using createSlice @reduxjs/toolkit and how to import it to store by using configureStore

here is my todosSlice file :

    //todosSlice file
    import {createSlice} from '@reduxjs/toolkit';
    const todosSlice = createSlice({
       name: 'todos',
       initialState: [],
       reducers: {
          addTodos: (state, action) => {
             state.push(action.payload)
          },
          removeTodos: (state, action) => {
             state.filter(todo => todo.id !== action.payload.id)
          }
       }
    });
    
    export const { addTodos, removeTodos } = todosSlice.actions;
    export default todosSlice.reducer; //this reducer that i want to import to store file

and here is my store file :

    import {configureStore} from '@reduxjs/toolkit';
    //and here is supposed where the reducer imported

    const store = configureStore({
       reducer: {
          todos: //here todos reducer should be.
          anyReducer: anyReducer,
       }
    });
    
    export default store;

Solution

  • The export default statement in your TodosSlice allows you to import the function with the name you want. So here what you could do.

    import {configureStore} from '@reduxjs/toolkit';
    import todosReducer from 'path/to/your/TodosSlice';
    
    const store = configureStore({
       reducer: {
          todos: todosReducer,
          anyReducer: anyReducer,
       }
    });