React Native Redux (Saga) initial state not working-CodePudding

I am creating React Native app, with Redux-Saga. Although everything run, initial state is not filled, and dispatch also is not working. Please help.

App.tsx

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import saga from 'redux-saga';
 
import { appReducer }  from './src/store/reducers';
import rootSaga from './src/store/sagas';
import { Counter } from './src/components/counter/counter';
 
// The middlewares which will be used in this App
const middlewares = [] as any;

// Initialize the saga middleware
const sagaMiddleware = saga();

middlewares.push(sagaMiddleware);

const store = createStore(
  appReducer,
  applyMiddleware(...middlewares)
);

sagaMiddleware.run(rootSaga);

export const App = () => {
    return (
      <Provider store={store}>
        <Counter />
      </Provider>
    );
}

index.ts (reducer)

import { ActionType } from 'typesafe-actions';
import { combineReducers } from 'redux';
import { CounterActionTypes, CounterState } from '../../constants/action-types';
import  { counterReducer } from './counterReducer';

// The top-level state object
export interface ApplicationState {
    readonly counter: CounterState 
}

export type CounterAction = ActionType<typeof CounterActionTypes>

export const appReducer = () => combineReducers({
    counter: counterReducer
});

counterReducer.ts

import { CounterActionTypes, CounterState } from '../../constants/action-types';
import { Reducer } from 'redux';
import { ActionType } from 'typesafe-actions';
import { counterActions } from '../actions/index';
 
export type CounterActions = ActionType<typeof counterActions>;


export const counterInitialState: CounterState = {
  count: 1000,
 };


export const counterReducer: Reducer<CounterState, CounterActions> = (
  state = counterInitialState,
  action,
): CounterState => {
  switch (action.type) {
    case CounterActionTypes.INCREASE:
      return {
        ...state,
        count: state.count   1
      };
    case CounterActionTypes.DECREASE:
      return {
        ...state,
        count: state.count - 1
      };
    default: 
      return state;
   
  }
};

counter.tsx (component - counter state is always undefined)

import {
  Button,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { increase } from '../../store/actions/counterActions';
import { ApplicationState } from '../../store/reducers';
import React, { useState }  from 'react';


export const Counter = () =>  {

  const  count = useSelector((state: ApplicationState) => state.counter?.count);
  
  const dispatch = useDispatch();

  return  (<>
    <View style={{alignItems: 'center', justifyContent: 'center', width: 30,}}>
      <TouchableOpacity>
        <Text>-{count}-</Text>
        
      </TouchableOpacity>
        <Button  title='Click here to increase' onPress={() => dispatch(  increase())} ></Button>
      <TouchableOpacity>
        <Text>async up</Text>
      </TouchableOpacity>
    </View>  
    </>)
}

I had to put state.counter?.count so it won't break. It should have initial value, but it does not? Why?

CodePudding user response：

I had only a very quick look at the code but I think the problem is your appReducer. I don't think it should be wrapped in a function.

So instead of:

export const appReducer = () => combineReducers({
    counter: counterReducer
});

try:

export const appReducer = combineReducers({
    counter: counterReducer
});