{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/react-tutorial-working-with-redux-toolkit-with-saga/", "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"cf94ca75-725d-52ee-b2ab-71f7aa5fd158","excerpt":"In this article i will explain you step by step to use redux toolkit with saga in react typescript application Step 1: Create react typescript application with…","html":"

In this article i will explain you step by step to use redux toolkit with saga in react typescript application

\n

Step 1: Create react typescript application with following command

\n
npx create-react-app my-app --template typescript\n
\n

Step 2: Install redux, redux toolkit, redux saga, react-redux, redux-actions

\n

In your newly created application install redux toolkit, redux saga and react-redux with following command

\n
npm install --save react-redux redux-saga redux-actions @reduxjs/toolkit @types/react-redux @types/redux-saga @types/redux-actions\n
\n

Install redux logger this helps in to log all triggered actions in the developer console

\n
npm install --save-dev redux-logger @types/redux-logger\n
\n

Install axios this helps in sending http request

\n
npm install --save axios @types/axios\n
\n

Step 3: Create Store

\n

Store act as central repository for all your state management

\n

Go to your project folder and create /src/store/index.ts this is the main file for your store creation where we will be initializing and creating store

\n
import { configureStore } from \"@reduxjs/toolkit\";\nimport { createStore, applyMiddleware } from \"redux\";\nimport createSagaMiddleware from \"redux-saga\";\nimport logger from \"redux-logger\";\nimport rootReducer from \"./rootReducer\";\nimport { rootSaga } from \"./rootSaga\";\n\nexport default function configureMainStore() {\n  const sagaMiddleware = createSagaMiddleware();\n  const store = configureStore({\n    reducer: rootReducer,\n    middleware: [sagaMiddleware, logger]\n    devTools: process.env.NODE_ENV !== \"production\",\n  });\n  sagaMiddleware.run(rootSaga);\n  return { store };\n}\n
\n

Step 4: Create Root Reducer

\n

Reducers are the pure functions that take the current state and action and return the new state and tell the store how to do

\n

Create a main reducer file as /src/store/rootReducer.ts where we will combine all the sub reducers and export it from here. Copy paste following content inside your rootReducer

\n
import { combineReducers } from \"@reduxjs/toolkit\";\nimport { userslice } from \"./user\";\nimport { appslice } from \"./app\";\n\nconst reducers = combineReducers({\n  user: userslice.reducer,\n  app: appslice.reducer,\n});\n
\n

Step 5: Create Auth Reducer

\n

We will be creating auth reducer as sub reducer i'm creating an example of login and signup to show you all how we can work for authentication in redux saga

\n

Create a file /src/store/userslice.ts and copy paste the following code

\n
import { createSlice, PayloadAction } from \"@reduxjs/toolkit\";\nimport { UserType } from \"../types/user\";\n\nconst initialState: UserType = {\n  userDetails: null,\n  token: null,\n};\n\nexport const userslice = createSlice({\n  name: \"user\",\n  initialState,\n  reducers: {\n    setAuthenticationToken: (\n      state = initialState,\n      { payload }: PayloadAction<any>\n    ) => {\n      return {\n        ...state,\n        token: payload,\n      };\n    },\n    loginAction: (state = initialState, { payload }: PayloadAction<any>) => {\n      return {\n        ...state,\n        userDetails: payload,\n      };\n    },\n  },\n  extraReducers: {},\n});\n
\n

Step 7: Add types for Auth

\n

Create a file /src/auth/store/types/user.ts and copy paste following code

\n
export type UserType = {\n  userDetails: any,\n  token: any,\n};\n
\n

Step 7: Create Auth Action types

\n

Actions are plain JavaScript object that must have a type attribute to indicate the type of action performed. It tells us what had happened. Types should be defined as string constants in your application as given below

\n

Create a file /src/store/actions/user.actions.types.ts and copy paste following code inside that file

\n
import { createAction } from \"redux-actions\";\n\nexport const LOGIN = \"LOGIN\";\nexport const login = createAction(LOGIN);\n\nexport const REGISTER = \"REGISTER\";\nexport const register = createAction(REGISTER);\n
\n

Step 8: Create Saga middleware for Auth

\n

Redux Saga is a middleware library used to allow a Redux store to interact with resources outside of itself asynchronously

\n

Create file /src/stores/sagas/user.ts copy paste the following code

\n
import { all, put, takeLatest } from \"redux-saga/effects\";\nimport { errorMessage, successMessage } from \"../../utilities/notification\";\nimport { userslice } from \"../slices/user\";\n\nimport { LOGIN, REGISTER } from \"../actions/user.actions.types\";\nimport axios from \"axios\";\nimport * as Effects from \"redux-saga/effects\";\nconst call: any = Effects.call;\n\nconst login = async (payload: { email: string, password: string }) => {\n  const { data } = await axios.post(\n    \"https://reqres.in/api/login\",\n    { email: payload.email, password: payload.password },\n    {\n      headers: {\n        \"Content-Type\": \"application/json\",\n        Accept: \"application/json\",\n      },\n    }\n  );\n  return data;\n};\n\nconst signup = async (payload: { email: string, password: string }) => {\n  const { data } = await axios.post(\n    \"https://reqres.in/api/register\",\n    { ...payload },\n    {\n      headers: {\n        \"Content-Type\": \"application/json\",\n        Accept: \"application/json\",\n      },\n    }\n  );\n\n  return data;\n};\n\nfunction* registerHandler({ payload: { data, callback } }: any) {\n  try {\n    const response: { token: string } = yield call(signup, {\n      ...payload,\n    });\n    if (callback) {\n      callback({ success: true, data: response.token });\n    }\n  } catch (error) {\n    if (callback) {\n      callback({ success: false, data: null });\n    }\n  }\n}\n\nfunction* loginSaga({ payload: { data, callback } }: any) {\n  try {\n    const response: { token: string } = yield call(signup, {\n      ...payload,\n    });\n    yield put(userslice.actions.setAuthenticationToken(response.token));\n    if (callback) {\n      callback({ success: true, data: response.token });\n    }\n  } catch (error) {\n    if (callback) {\n      callback({ success: false, data: null });\n    }\n  }\n}\n\nfunction* authSaga() {\n  yield all([takeLatest(LOGIN, loginSaga)]);\n  yield all([takeLatest(REGISTER, registerHandler)]);\n}\n\nexport default authSaga;\n
\n

Step 9: Create Root saga which combine all the saga and export

\n

Create a file /src/store/sagas/index.ts and copy paste the following code

\n
import { all } from \"redux-saga/effects\";\nimport user from \"./user\";\n\nconst sagas = function* sagas() {\n  yield all([user()]);\n};\n\nexport default sagas;\n
\n

Step 10:Add Store provider to your index.ts file

\n

Inside your src/index.tsx file copy paste the following code

\n
import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\nimport { Provider } from \"react-redux\";\nimport configureStore from \"./stores\";\n\nconst { store } = configureStore();\n\nconst root = ReactDOM.createRoot(\n  document.getElementById(\"root\") as HTMLElement\n);\nroot.render(\n  <React.StrictMode>\n    <Provider store={store}>\n        <App />\n    </Provider>\n  </React.StrictMode>\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n
\n

Step 11:Inside your login page use redux saga

\n
import React, { useRef } from \"react\";\nimport { login } from \"../store/actions/user.actions.types.ts\";\nimport { connect } from \"react-redux\";\n\nconst Login: React.FC<{}> = (props: any) => {\n  const emailRef = useRef();\n  const passwordRef = useRef();\n\n  const callback = (data: any) => {\n    console.log(\"Inside callback after login\");\n  };\n\n  const login = () => {\n    let data: any = {\n      values: {\n        email: emailRef.current.value,\n        password: passwordRef.current.value,\n      },\n      callback,\n    };\n    props.login(data);\n  };\n  return (\n    <div>\n      <div className=\"form-floating\">\n        <input\n          type=\"email\"\n          className=\"form-control\"\n          name=\"email\"\n          id=\"floatingInput\"\n          placeholder=\"name@example.com\"\n          ref={emailRef}\n        />\n        <label htmlFor=\"floatingInput\">Email address</label>\n      </div>\n\n      <div className=\"form-floating mt-3\">\n        <input\n          type=\"password\"\n          className=\"form-control\"\n          name=\"password\"\n          id=\"floatingPassword\"\n          placeholder=\"Password\"\n          ref={passwordRef}\n        />\n        <label htmlFor=\"floatingPassword\">Password</label>\n      </div>\n\n      <div className=\"checkbox mb-3 mt-3\">\n        <label>\n          <input name=\"remember\" type=\"checkbox\" defaultValue=\"remember-me\" />{\" \"}\n          Remember me\n        </label>\n      </div>\n      <button\n        onClick={() => {\n          login();\n        }}\n        className=\"w-100 btn btn-lg btn-warning\"\n      >\n        Sign in\n      </button>\n    </div>\n  );\n};\n\nconst mapDispatchToProps = (dispatch: any) => ({\n  login: (params: any) => dispatch(login(params)),\n});\n\nexport default connect(null, mapDispatchToProps)(Login);\n
","fields":{"slug":"/react-tutorial-working-with-redux-toolkit-with-saga/"},"frontmatter":{"title":"React tutorial working with redux toolkit with saga in typescript","date":"April 26, 2023","description":"In this article i will explain you step by step to setup redux toolkit with saga in typescript","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/redux-toolkit.jpeg"}},"previous":{"fields":{"slug":"/react-tutorial-using-redux-saga-typescript/"},"frontmatter":{"title":"React tutorial using redux saga in react typescript application","date":"April 16, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}},"next":{"fields":{"slug":"/restapi-using-deno-oak-mongodb/"},"frontmatter":{"title":"Developing REST Api using Deno, Oak and MongoDB","date":"April 30, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/RestAPI.jpg"}}},"pageContext":{"id":"cf94ca75-725d-52ee-b2ab-71f7aa5fd158","previousPostId":"a48018e9-44ac-53f0-a03b-da9bde9fb047","nextPostId":"6d904096-d929-5403-a8d8-150a4d45b491"}}, "staticQueryHashes": ["3860684146"]}