Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
66 views

How To Build A Simple ToDo App in React Native Using Redux Toolkit - by Yajana Rao - JavaScript in Plain English

This document discusses building a simple todo app in React Native using Redux Toolkit. It installs required dependencies, creates a Redux store, provides the store to React Native components, creates a "todos" slice to manage todo state, adds the slice reducer to the store, and builds AddTodo and TodoList components to add and display todos using Redux state and actions.

Uploaded by

butada basura
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
66 views

How To Build A Simple ToDo App in React Native Using Redux Toolkit - by Yajana Rao - JavaScript in Plain English

This document discusses building a simple todo app in React Native using Redux Toolkit. It installs required dependencies, creates a Redux store, provides the store to React Native components, creates a "todos" slice to manage todo state, adds the slice reducer to the store, and builds AddTodo and TodoList components to add and display todos using Redux state and actions.

Uploaded by

butada basura
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Open in app Get started

Published in JavaScript in Plain English

Yajana Rao Follow

Jul 9, 2021 · 3 min read · Listen

Save

How to Build a Simple ToDo App in React Native


using Redux Toolkit
In this article, we will build a simple todo app using the Redux toolkit in React Native.

Link expo snack: https://snack.expo.io/@yajana/react-native-redux-toolkit


60

Link to GitHub repository: https://github.com/YajanaRao/react-native-redux-toolkit-app


Let’s start by installing the required libraries for building a todo app.
Open in app Get started

Install required dependencies


Install redux-toolkit using npm or yarn

Creating a Redux Store


Let’s start by creating a file named src/store.js . Import the configureStore API from
Redux Toolkit. We’ll start by creating an empty Redux store, and exporting it:

Provide the Redux Store to React Native


We will make the redux available to React Native components by wrapping React-
Redux <Provider/> around our application in App.js . Import the Redux store we just
created, put a <Provider/> around your <App/> , and pass the store as a prop:
Open in app Get started

Creating the Todos Slice


Add a new file named src/features/todos/todosSlice.js . In that file, import the
createSlice API from Redux Toolkit.
Open in app Get started

Add Slice Reducers to the Store


Next, we need to import the todos reducer function from the todos slice and add it to
our store. By defining a field inside the reducers parameter, we tell the store to use this
slice reducer function to handle all updates to that state.

Using Redux State and Actions in React Native Components


Now let’s create AddTodo and TodoList components to use redux state and actions.
In AddTodo component, we use useDispatch to use Redux actions in React Native
Open in app Get started
components. On pressing add button addTodo action will be dispatched with todo text
as payload.

In TodoList we use useSelector hook to access the todos in the redux store.
Open in app Get started

Now let’s import <AddTodo/> and <TodoList/> component in App component to see a
working Todo App.

Link expo snack: https://snack.expo.io/@yajana/react-native-redux-toolkit

Link to the GitHub repository: https://github.com/YajanaRao/react-native-redux-toolkit-app

References:

Quick Start | Redux Toolkit


Welcome to the Redux Toolkit Quick Start tutorial! This tutorial will briefly introduce you to
Redux Toolkit and teach…
redux-toolkit.js.org
Open in app Get started

reduxjs/redux-toolkit
In the Basic Tutorial, you saw the main API functions that are included in
Redux Toolkit, and some short examples of…
github.com

More content at plainenglish.io

About Help Terms Privacy

Get the Medium app

You might also like