React Redux
CHEAT SHEET 01
Overview Store is one of the core feature of redux. This is
Redux Setup
were our data would be stored and to create it
Redux is a library that holds your application state in a just use the createStore function and pass the
rootReducer as parameter.
place that is globally accessible so that your application
components can directly access the data from that global Setup Redux Store redux/store.js
Installing
place, instead of you manually passing data throughout all import { createStore } from "redux";
the components. npm i redux react-redux import rootReducer from "./reducer/rootReducer";
const store = createStore(rootReducer);
OR
export default store;
yarn add redux react-redux
Connect store to provider index.js file
Setup Redux Provider index.js file
import { Provider } from "react-redux";
import { Provider } from "react-redux"; // Redux Store
ReactDOM.render( import store from "./Redux/store";
<React.StrictMode> ReactDOM.render(
<Provider> <React.StrictMode>
<App /> <Provider store={store}>
</Provider> <App />
</React.StrictMode>, </Provider>
document.getElementById("root") </React.StrictMode>,
); document.getElementById("root")
);
Redux provides a wrapper called Provider. You
must wrap it around your whole application and
index.js in the best place to do it. How after setting up the store pass the
store to the Provider in index.js file
Now Root reducer Dispatch redux action
// libraries import { useDispatch } from "react-redux";
React Redux
import { combineReducers } from "redux"; // Redux Action
// Reducers import { addUserAction } from
import user from "./user/user.reducer"; "../Redux/reducer/user/user.action";
CHEAT SHEET 02 // root reducer
const rootReducer = combineReducers({ user });
const UserList = () => {
// Initialize dispatch hook from react-redux
export default rootReducer; const dispatch = useDispatch(); 1
Reducers & Actions Root reducer really required to bundle all your seperate
const submit = () => {
dispatch(addUserAction(userData)); 2
reducers into one single object to pass on to the store. };
A simple reducer combineReducers method is used to acheve this.
return (
const INITIAL_STATE = { Redux Action <>
user: [], <button id=”submit-btn” onClick={submit}>
// Redux Action to add new user
Submit
}; export const addUserAction = ({ name, email }) => {
</button>
const userReducer = (state = INITIAL_STATE, action) => { return {
</>
switch (action.type) { type: "ADD_USER",
);
payload: { name, email, id: `${Math.random()}` },
case "ADD_USER": }
};
return {
};
...state,
An action is a simple function that would specify what type of action / Redux provides us with hooks to simplfy
user: [...state.user, action.payload], what type of operation that a reducer should perform. By returning the the dispatch process. useDispatch hook
type property the reducer will perform the action based on that type. will return the dispatch function which
};
can be used to dispatch action.
case "DELETE_USER":
Access redux store values
return {
import { useSelector } from "react-redux";
...state, const UserList = () => {
user: state.user.filter(({ id }) => id !== // Redux state
action.payload), const reduxState = useSelector(({ user }) => ({ user}));
}; return (
<>
default: Redux provides us with hooks to simplfy
<div className="d-flex mt-5 flex-wrap"> the access. useSelector hooks is used to
return { get the redux state object.
<h1>{reduxState.user.name}
...state, </div>
}; </>
} );
}; } By default useSelector retreives all the
state object, so destructuring can be
used to filter them, as we did in the
A typical reducer structure, that updates example to the left.
data based on certain cases.
