How to set up redux in react native?

user_17120111 0
Viewed 110

My code:

function App({ isAuthenticated }) {

    const dispatch = useDispatch();
    const [token, setToken] = useState()
    const [appLoaded, setAppLoading] = useState(false)
    const routes = buysellRoutes(isAuthenticated, token);

     const [fontsLoaded] = useFonts({
         Inter_900Black,
     })
   

    return (
        <Provider store={store}>
        <ApplicationProvider {...eva} theme={eva.light}>
            { appLoaded && fontsLoaded ? routes : <PreLoadScreen />}
        </ApplicationProvider>
        </Provider>
    )
}

function mapStateToProps(state) {
    return {
        isAuthenticated: state.auth.isAuthenticated,
    };
}

export default connect(mapStateToProps)(App);

Error: Could not find "store" in the context of "Connect(App)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(App) in connect options.

react-redux react-native javascript
2 Answers

Here the main issue is you cannot connect the main component without a provider, so create one HOC and provide the store to the whole app and then after you can connect.

Another way is, you can use context in inner components so you don't need to connect the component just provide the store to the main HOC.

You can refer to this project for the initial react native app setup react native starter project with redux

user_84289490

There are some problems with your implementation. I'll try to explain them step by step:

First, you need a store.js file to create your store outside of your App.js. for more information take a look at its documentation.

Second, the App component is considered as the root component in the react structure so avoid passing the props to the root component which is clearly wrong.

Third, you need to pass the store through of <Provider store={store} > and consume the store (get store's data as a state) in the components or pages with useSelector method, and no more need to mapStateTopProps.

Note: you must define and pass the store to the Top-level component and use it inside of the children.

Note: to check the isAuthenticated property, separate your ApplicationProvider and create a component for it.

function SomeComponent() {
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated)
  
  const dispatch = useDispatch();
  const [token, setToken] = useState()
  const [appLoaded, setAppLoading] = useState(false)
  const routes = buysellRoutes(isAuthenticated, token);
  
  return(
    <ApplicationProvider {...eva} theme={eva.light}>
      { appLoaded && fontsLoaded ? routes : <PreLoadScreen />}
    </ApplicationProvider>
  )
}

Optionally:

You may need to dispatch some actions in your component, with react hooks it's easy with useSelector and useDispatch without mapStateToProps or mapDispatchToProps:

function SomeExampleComponent () {
 const dispatch = useDispatch();
  
 const handleToggle = () => {
   // ...
   dispatch({type: "TOGGLE", payload: undefiend})
   // or you can dispatch some actions that you defined before:
   dispatch(onToggleAction())
 }  

 return (
   <div onClick={handleToggle}>
     // ... 
   </div>
 )}
user_57379500
Related