Issue accessing store and calling actionCreators - react-native

Question

I'm in the process of learning React Native with Redux and can't wrap my head around how to access the store/actionCreators from within my components. I feel like I've tried ten or so variants of code, watched most of Dan Abramov's Egghead videos (multiple times), and still don't understand what I'm doing wrong. I think the best explanation I've seen so far is the accepted answer here: Redux, Do I have to import store in all my containers if I want to have access to the data?
The error I get is: undefined is not an object (evaluating 'state.clinic.drName'). Here are the relevant bits of code:
I'm passing the store via the Provider (so I think):
index.ios.js
import clinicReducer from './reducers/clinic';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
const rootReducer = combineReducers({
clinic : clinicReducer
});
let store = createStore(combineReducers({clinicReducer}));
//testing - log every action out
let unsubscribe = store.subscribe( () =>
console.log(store.getState())
);
class ReactShoeApp extends React.Component {
render() {
return (
<Provider store={store}>
<ReactNative.NavigatorIOS
style={styles.container}
initialRoute={{
title: 'React Shoe App',
component: Index
}}/>
</Provider>
);
}
}
Here is my actionCreator:
export const CLINIC_DR_NAME_UPDATE = 'CLINIC_DR_NAME_UPDATE_UPDATE';
export function updateClinicDrName(newValue) {
return {type: CLINIC_DR_NAME_UPDATE, value: newValue};
}
Here is my reducer:
import {
CLINIC_DR_NAME_UPDATE
} from '../actions/';
let cloneObject = function(obj) {
return JSON.parse(JSON.stringify(obj));
};
const initialState = {
drName : null
};
export default function clinicReducer(state = initialState, action) {
switch (action.type) {
case CLINIC_DR_NAME_UPDATE:
return {
...state,
drName: action.value
};
default:
return state || newState;
}
}
and here is my component:
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as Actions from '../actions';
const mapStateToProps = function(state){
return {
drName: state.clinic.drName,
}
};
const mapDispatchToProps = function (dispatch) {
return bindActionCreators({
updateClinicDrName: Actions.updateClinicDrName,
}, dispatch)
};
//class definition
class Clinic extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.rowContainer}>
<View style={styles.row}>
<TextGroup label={'Dr. Name'} placeholder={'placeholder'} value={this.props.drName} onChangeText={(text) => this.handlers.onNameChange({text})}></TextGroup>
<TextGroup label={'City'} placeholder={'placeholder'}></TextGroup>
</View>
</View>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Clinic);
All I'm trying to do is update the store (clinic.drName) when the user types in the Dr Name Text Group. Any and all help is appreciated.

Answer 1

The issue is you're mismatching the way you call combineReducers() with the name of the slice you're expecting. This is a common mistake. You're defining an object with the key clinicReducer, but expecting the data to be at a key named clinic.
See Defining State Shape for an explanation of the problem.
Also, your clinicReducer() function looks odd, and has several issues:
Don't access variables outside the function like you are with newState.
Don't do deep-cloning like that (per Redux FAQ: Performance). Instead, use "shallow cloning" to update the state if necessary (see examples at Immutable Update Patterns).
It looks like the reducer is double-nesting the data it's trying to access as well.
I think you want something more like:
// clinicReducer.js
const initialState = {
drName : null
};
export default function clinicReducer(state = initialState, action) {
switch(action.type) {
case CLINIC_DR_NAME_UPDATE: {
return {
...state,
drName : actino.value
};
}
default: return state
}
}
// index.js
import clinicReducer from "./reducers/clinic";
const rootReducer = combineReducers({
clinic : clinicReducer
});

Answer 2

What errors are you getting? I see two issues with what you have.
newState.clinic.drName = action.value; should be throwing a typeError. So for this to work you need to change newState to:
const newState = {
clinic: {}
}
What is this.handlers.onNameChange({text})? I think you need to change this to this.props.updateClinicDrName(text).