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)