React Native Redux（Saga）初始状态不起作用

Question

我正在使用 Redux-Saga 创建 React Native 应用程序。尽管一切运行，但初始状态未填充，并且调度也不起作用。请帮忙。

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（减速机）

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（组件 - 计数器状态始终未定义）

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

我必须输入 state.counter?.count 这样它才不会损坏。它应该有初始值，但它没有？为什么？

Answer 1

我只是快速浏览了一下代码，但我认为问题出在您的 appReducer 上。我认为它不应该包含在函数中。

所以代替：

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

尝试：

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

React Native Redux（Saga）初始状态不起作用

React Native Redux (Saga) initial state not working

react-native

react-redux

redux-saga