React Redux Setup¶

To easily manage our applications state, we will use Redux.

Info

Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.

To be able to use Redux with React we will need to install 2 dependencies via npm, redux and react-redux.

npm i --save redux react-redux

After installation is done, lets first create a new folder called store inside our ./src folder.

In this folder, first file we will create will be index.ts that will contain store initialization.

./src/store/index.ts

import { createStore } from "redux";
import rootReducer from "./reducers/index";

const store = createStore( rootReducer );

export default store;

First thing you will notice here is that we are missing rootReducer definition, so lets create our root reducer.

Info

You are maybe wondering what is a Reducer here. We will explain this in more detail later when we actually setup the ToDo-List Store!

We will add a new folder called reducers inside ./src/store. In that folder, lets immediately create index.ts file that will be definition for our root reducer.

./src/store/reducers/index.ts

import { combineReducers } from "redux";

const rootReducer = combineReducers({
    // For now this object is empty since we did not create any reducers yet
    // We will create one that will handle todo list state after
});

export type RootState = ReturnType<typeof rootReducer>;

export default rootReducer;

So we defined our Redux store which will be empty for now. In order to be able to access our store from React components, we will have to update our App.tsx so we wrap our code inside redux provider.

./src/App.tsx

import { Provider } from "react-redux";
import store from "./store";

function App() {
    return (
        <Provider store={store}>
            <div></div>
        </Provider>
    );
}

export default App;

Info

Now, anything that is wrapped inside react-redux <Provider ... will have access to our Redux store and we are done with Redux store setup for now.