Redux

[Abhishek0943]

In index.js i can not able to import creatStore vs code suggest me to use redex tool kit please help me

[MarcoSpicuzza]

Hey you can still use createStore, it's just a deprecated term because nowadays redux toolkit replaced original redux. createStore will work anyway, if you want to update the code you should recode your project with configureStore.

[japusoy]

import { configureStore } from '@reduxjs/toolkit';

import customizationReducer from 'store/customizationReducer';
import errorReducer from 'redux/error';
import partReducer from 'redux/maintenance/composite/part';

export const store = configureStore({
    middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
    reducer: {
        customization: customizationReducer,
        error: errorReducer,
        auth: authReducer,
        /* COMPOSITE */
        parts: partReducer,
    }
});

import { createSlice } from '@reduxjs/toolkit';

const initialState = [];

export const partSlice = createSlice({
    name: 'part',
    initialState,
    reducers: {
        FETCH: (state, action) => {
            // Redux Toolkit allows us to write "mutating" logic in reducers. It
            // doesn't actually mutate the state because it uses the Immer library,
            // which detects changes to a "draft state" and produces a brand new
            // immutable state based off those changes
            return action.payload.result;
        },
        CREATE: (state, action) => {
            return [...state, action.payload.result];
        },
        UPDATE: (state, action) => {
            return state.map((part) => (part.part_id === action.payload.result.part_id ? action.payload.result : part));
        },
        DELETE: (state, action) => {
            return state.filter((part) => part.part_id !== action.payload);
        }
    }
});

// Action creators are generated for each case reducer function
export const { FETCH, CREATE, UPDATE, DELETE } = partSlice.actions;

export default partSlice.reducer;

The REDUX toolkit is much way better.

[A-bhiSheKumar]

Hey developers, those who are facing problems regarding REDUX (realated to store) here the solution. import React from 'react'; import ReactDOM from 'react-dom';

import { Provider } from 'react-redux'; import { configureStore } from "@reduxjs/toolkit"; import rootReducer from './reducers';

import App from './App'; import thunk from 'redux-thunk';

const store = configureStore({ reducer:rootReducer, middleware: [thunk], })

ReactDOM.render(<App /> , document.getElementById('root'));

note: createStore is deprecated (no more in use ) so use redux tool kit (you need to first install that using -

npm install @reduxjs/toolkit

[AAdewunmi]

Hey developers, those who are facing problems regarding REDUX (realated to store) here the solution. import React from 'react'; import ReactDOM from 'react-dom';

import { Provider } from 'react-redux'; import { configureStore } from "@reduxjs/toolkit"; import rootReducer from './reducers';

import App from './App'; import thunk from 'redux-thunk';

const store = configureStore({ reducer:rootReducer, middleware: [thunk], })

ReactDOM.render( , document.getElementById('root'));

note: createStore is deprecated (no more in use ) so use redux tool kit (you need to first install that using -

npm install @reduxjs/toolkit

Hey, tried your fix but it didnt work.

Check out my code par the same issue.

Will appreciate your assistance.

https://github.com/adrianhajdin/project_mern_memories/issues/177#issue-2028978845

[AAdewunmi]

In index.js i can not able to import creatStore vs code suggest me to use redex tool kit please help me

Issue fixed! If you are having issues with Redux createStore() being depreciated, here's how to use configureStore():

1. Run on server side console ->

NPM

npm install @reduxjs/toolkit

Yarn

yarn add @reduxjs/toolkit

2. Include configureStore() in your client/src/index.js file

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
// import { createStore, applyMiddleware, compose} from "redux";
// import thunk from "redux-thunk";
import { configureStore } from "@reduxjs/toolkit";
import reducers from "./reducers";
import App from "./App";
import "./index.css";

// const store = createStore(reducers, compose(applyMiddleware(thunk)));
const store = configureStore({ reducer: reducers });
ReactDOM.render(
    <Provider store={store}>
       <App />
    </Provider>,
  document.getElementById("root")
);

Job done!