问反应本机剩余(Saga)初始状态不起作用

EN

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>
    );
}

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
});

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;
   
  }
};

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>  
    </>)
}