React Native Redux Reducer not working

Question

I'm attempting to implement redux into a relatively simple app, however my actions don't seem to be triggering the reducers properly. Through console logging the action seems to be firing, but the respective reducer isn't being executed.

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 (A child component within RootStack which is using 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)
  }
 //   ...
}

EDIT: I have changed the initial value in the reducer to an appropriate object but my reducer is still not working after the action is called. Any ideas? Thank you!

Makes sense, your initial value of RiskReducer is `false`. `false.anything = undefined` — Ritwick Dey, May 06 '18 at 07:36
That was definitely an issue, but the reducer still is not being updated at all after the action is fired. — Billy Bob Joel, May 06 '18 at 13:14

score 1 · Answer 1 · answered May 06 '18 at 07:35

1

There is problem with initial state in your reducer. Make changes as shown below:

INITIAL_STATE = { risk_level: false }

answered May 06 '18 at 07:35

sharad_kalya

255
1
3
11

So I did this, but my reducer is still not being updated at all after the action is triggered. Any ideas? Thank you! – Billy Bob Joel May 06 '18 at 13:15
console.log of your componentDidMount() before calling action; is it still undefined? – sharad_kalya May 06 '18 at 16:25
Nope, it's returning the right value (false). However my main issues is that my action, saveRisk, is not calling the reducer and the state within the reducer (risk_value) is not updating. – Billy Bob Joel May 06 '18 at 17:11
Oops! your `saveRisk` is a action generator. It will not call reducer. `@connect(mapStateToProps, mapDispatchToProps)`. reference: https://stackoverflow.com/a/32675956/6120338 – Ritwick Dey May 06 '18 at 17:32
1

For your case, `@connect(state => ({risk_level: state.risk_level.risk_level}), dispatch => ({saveRisk: (payload) => dispatch(saveRisk(payload))}) )` – Ritwick Dey May 06 '18 at 17:35
Yeah I actually figured it out, I needed to write : this.props.dispatch(this.props.saveRisk(riskVal)) – Billy Bob Joel May 06 '18 at 18:49

score 1 · Accepted Answer · answered May 06 '18 at 18:51

1

Figured it out, when calling the action I needed to write:

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

Thanks for your help everyone!

answered May 06 '18 at 18:51

Billy Bob Joel

199
2
4
15

React Native Redux Reducer not working

2 Answers2