React Native Redux Reducer 不工作

Posted 2023-02-22

【中文标题】React Native Redux Reducer 不工作

【英文标题】：React Native Redux Reducer not working

【发布时间】：2018-10-16 06:11:06

【问题描述】：

我正在尝试将 redux 实现到一个相对简单的应用程序中，但是我的操作似乎没有正确触发减速器。通过控制台日志记录，动作似乎正在触发，但相应的减速器没有被执行。

App.js：

import Provider from 'react-redux';
import configureStore from './src/config/configureStore.js';
const store = configureStore();

export default class App extends React.Component     
render() 
return (
  <Provider store = store>
      <RootStack />
  </Provider>
);

configureStore.js：

import createStore, applyMiddleware from 'redux';
import reducers from '../reducers';
import thunk from 'redux-thunk';

export default function configureStore(initialState) 
  const store = createStore (
    reducers,
    applyMiddleware(thunk)
  );
  return store;

actions/index.js:

export const saveRisk = (payload) => 
  console.log('saved RISK!');
  return (dispatch) => 
    dispatch(type: 'risk_chosen',payload: payload);
  

reducers/index.js：

import  combineReducers  from 'redux';
import RiskReducer from './RiskReducer';

export default combineReducers(
  risk_level: RiskReducer
);

RiskReducer.js

const INITIAL_STATE = risk_level: false;
export default (risk = INITIAL_STATE, action) => 
  if(action.type === 'risk_chosen') 
    console.log('RISK REDUCER SUCCESSFUL')
    return 
      ...risk, risk_level: action.payload
    ;
  
  console.log('REDUCER RISK:');
  console.log(risk);
  return risk;

RiskTolerance.js（RootStack 中使用 redux 的子组件）：

import  connect  from 'react-redux';
import saveRisk from '../../actions'
@connect(state => (risk_level: state.risk_level.risk_level, saveRisk))
export default class RiskTolerance extends React.Component 
 //   ...
  componentDidMount()
    console.log(this.props.risk_level);
 // ^^returns undefined, despite the reducer initializing it to "false"
    let riskVal = 'something'
    this.props.saveRisk(riskVal)
  
 //   ...

编辑：我已将减速器中的初始值更改为适当的对象，但在调用操作后我的减速器仍然无法工作。有任何想法吗？ 谢谢！

【问题讨论】：

有道理，RiskReducer 的初始值为false。 false.anything = undefined

这绝对是个问题，但是在触发操作后，reducer 仍然没有被更新。

【参考方案1】：

想通了，在调用我需要编写的操作时：

this.props.dispatch(this.props.saveRisk(riskVal))

感谢大家的帮助！

【参考方案2】：

reducer 的初始状态存在问题。如下所示进行更改：

INITIAL_STATE =  risk_level: false 

【讨论】：

所以我这样做了，但是在触发操作后我的减速器仍然没有被更新。有任何想法吗？谢谢！

console.log 在调用操作之前您的 componentDidMount() ；还没有定义吗？

不，它返回的是正确的值 (false)。但是我的主要问题是我的操作 saveRisk 没有调用减速器，并且减速器中的状态 (risk_value) 没有更新。

糟糕！你的saveRisk 是一个动作生成器。它不会调用reducer。 @connect(mapStateToProps, mapDispatchToProps)。参考：***.com/a/32675956/6120338

对于您的情况，@connect(state => (risk_level: state.risk_level.risk_level), dispatch => (saveRisk: (payload) => dispatch(saveRisk(payload))) )