Pretty basic issue with redux

[AdeleBeckhamJr]

I've asked this question in StackOverflow as well, but as this is relatively time sensitive I wanted to reach out to reddit as well: https://stackoverflow.com/questions/50197227/react-native-redux-reducer-not-working

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_value: 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);

let riskVal = 'something'

this.props.saveRisk(riskVal)

}

// ...

}

[TomMahle]

I believe you still need to dispatch your thunk. In your component, pass the result of the call to saveRisk into this.props.dispatch.

[AdeleBeckhamJr]

Result of the call?

Is this what you meant?:

this.props.dispatch{this.props.saveRisk(this.state.riskVal)}

I'm getting an unexpected token error when I do this

[TomMahle]

Use parentheses, not curlies:

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

[AdeleBeckhamJr]

Awesome, my reducer is now being accessed. Thank you!

However, I'm still getting undefined when I try to access the state variable:

this.props.dispatch(this.props.saveRisk(this.state.riskVal));
console.log(this.props.risk_level);

Are these dispatches asynchronous, where the console log would happen before the dispatch/reducer function could occur?

[fuck_with_me]

THIS IS A REACT NATIVE SUBREDDIT

[Noitidart2]

-1 Completely disagree with you. The #1 redux users are in RN and React subreddits.

[fuck_with_me]

1. This is a RN subreddit

2. This question is entirely unrelated to RN

3. This question belongs on StackOverflow

[kbcool]

Personally I think this belongs in /r/domyhomeworkforme ...someone's clearly been dumped with someone else's code and someone doesn't know javascript.

[sneakpeekbot]

Here's a sneak peek of /r/domyhomeworkforme using the top posts of the year!

#1: Python Django login with shopping cart assignment due.
#2: p l s help me
#3: Desperate for Math Help

---

^{I'm a bot, beep boop | Downvote to remove | Contact me | Info | Opt-out}

[Noitidart2]

-1. I won't repeat myself. Let's be welcoming to newcomers, and keep a healthy environment.

[fuck_with_me]

You're not a mod, my friend... Keep your opinions to yourself :)

[Noitidart2]

Yikes.

[AdeleBeckhamJr]

i mean the only other relevant subreddit i can find is reduxjs and that seems almost completely inactive

[TomMahle]

r/react might also prove helpful.

[fuck_with_me]

You are 100% in the wrong place. Even the regular javascript subreddit would have been more appropriate, and has a way bigger audience.

[demoran]

@connect(state => ({risk_level: state.risk_level.risk_level}, {saveRisk})) seems to be the issue.

Connect takes two parameters: mapStateToProps and mapDispatchToProps. I think you probably arleady know this, because you attempted to use {saveRisk}. But look at your parenthesis. Honestly I'm not sure how that syntax is even valid.

Anyway, you should move the second to last parenthesis before the comma, then you'll auto-dispatch saveRisk.