Setting up the Store

This tutorial's goal is to show how easy it is to use Async Redux.

We'll create a simple Todo List app, with a list of todos and a button to add a new todo.

Start by declaring App as the root React component:

React

main.tsx

import React from 'react'
import { createRoot } from 'react-dom/client'
import { App } from './App'

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<React.StrictMode><App/></React.StrictMode>);

React Native

index.js

import { AppRegistry } from 'react-native';
import { App } from './src/App';

AppRegistry.registerComponent("TodoAppReactNative", () => App);

We then create the Async Redux store, and make it available:

App.tsx

import React from "react";
import { Store, StoreProvider } from 'async-redux-react';

const store = createStore<State>({
  initialState: State.initialState,
});

export const App: React.FC = () => {
  return (
    <StoreProvider store={store}>
      <AppContent />
    </StoreProvider>
  );
}