Create store.js file in the src folder, which will have all the data you can create slices which are reducer functions what are actions based on the state of the application, this is a RTK functionality there can be multiple slices according to the data in the slice file for example, movieSlice.js , you can use createSlice function to create a slice this createSlice function takes in an object with diferent values, name, initialState, reducers we can also create a different object for initialstate import { createSlice } from " @reduxjs/toolkit " ; const initialState = { movies : [], }; const movieSlice = createSlice ({ name : " movies " , initialState , reducers : { addMovie : () => {}, removeMovie : () => {}, }, }); Enter fullscreen mode Exit fullscreen mode so in slices we define the state and when we want to do some change to the state, we call the reducer functions reducer functions take 2 arguments: state and action addMovie : ( state , action ) => { state . movies . push ( action . payload ); }, Enter fullscreen mode Exit fullscreen mode now through the state we can access the state of the slice and then through action we can get the data that we can use to update the state so we can get current state and then we can perform actions of either read or update or delete through the actions now in the main.jsx file we can import Provider from react-redux which will take a store argument where we can pass our store that we have crated import { StrictMode } from " react " ; import { createRoot } from " react-dom/client " ; import " ./index.css " ; import App from " ./App.jsx " ; import { Provider } from " react-redux " ; import { store } from " ./store.js " ; createRoot ( document . getElementById ( " root " )). render ( < StrictMode > < Provider store = { store } > < App /> </ Provider > </ StrictMode > ); Enter fullscreen mode Exit fullscreen mode useSelector is one of the hooks that react-redux provides for getting data from the state const movies = useSelector (( state ) => state . movies . movies ); Enter fullscreen mode Exit fullscreen mode this is how you get the state from the store, here useSelector gets an arguments through which we can access the store. so state.movies will get the state from the store which will direct to the movies slice so now we can access the the state in the movies slice through state.movies.movies we can do this because in the movies we have done export const store = configureStore ({ reducer : { movies : movieReducer , }, }); Enter fullscreen mode Exit fullscreen mode useDispatch hook is also one of the hooks that redux provides that is used to call any function or in case of redux it is used to call any action function, in our case it will be addMovie() export const MovieInput = () => { const [ newMovie , setNewMovie ] = useState ( "" ); const dispatch = useDispatch (); const handleAddMovie = () => { if ( newMovie ) { dispatch ( addMovie ( newMovie )); setNewMovie ( "" ); } }; return ( <> < input onChange = { ( e ) => setNewMovie ( e . target . value ) } value = { newMovie } /> < button onClick = { handleAddMovie } > Add Movie</ button > </> ); }; Enter fullscreen mode Exit fullscreen mode so this is the way we can call a function and then pass the value in the slice we can get the value that we passed here through action.payload 
Top comments (0)