My Redux Toolkit notes

• 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: () => {},
  },
});

• 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);
  },

• 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>
);

• useSelector is one of the hooks that react-redux provides for getting data from the state

  const movies = useSelector((state) => state.movies.movies);

• 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,
  },
});

• 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>
    </>
  );
};

• 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