Question

我正在使用Redux学习React Native，并且无法解决如何从我的组件中访问store / actionCreators的问题。我觉得我已经尝试了十个左右的代码变体，观看了大部分Dan Abramov的Egghead视频（多次），但仍然不明白我做错了什么。我认为到目前为止我看到的最好的解释是接受的答案：Redux, Do I have to import store in all my containers if I want to have access to the data?

我得到的错误是：undefined不是对象（评估'state.clinic.drName'）。以下是相关的代码：

我通过提供商传递商店（我认为）：

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

这是我的actionCreator：

export const CLINIC_DR_NAME_UPDATE = 'CLINIC_DR_NAME_UPDATE_UPDATE';

export function updateClinicDrName(newValue) {
    return {type: CLINIC_DR_NAME_UPDATE, value: newValue};
}

这是我的减速机：

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;
       }
    }

这是我的组件：

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

当我在用户输入Dr Name Text Group时，我所要做的就是更新商店（clinic.drName）。任何和所有的帮助表示赞赏。

Answer 1

问题是，您使用您期望的切片名称调用SelectMany的方式不匹配。这是一个常见的错误。您使用密钥combineReducers()定义了一个对象，但期望数据位于名为clinicReducer的密钥中。

有关问题的解释，请参阅http://redux.js.org/docs/recipes/reducers/UsingCombineReducers.html#defining-state-shape。

此外，您的clinic函数看起来很奇怪，并且有几个问题：

不要像使用clinicReducer()一样访问函数外部的变量。
不要像那样深入克隆（每http://redux.js.org/docs/faq/Performance.html#performance-clone-state）。相反，使用＆＃34;浅层克隆＆＃34;必要时更新状态（参见http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html中的示例）。
看起来缩减器对它试图访问的数据进行了双重嵌套。

我想你想要更像的东西：

newState

Answer 2

你得到了什么错误？我看到你遇到的两个问题。

gfortran: No such file or directory应该抛出一个typeError。因此，要使其工作，您需要将newState更改为：

newState.clinic.drName = action.value;
什么是const newState = { clinic: {} }？我认为您需要将其更改为this.handlers.onNameChange({text})。

发出访问商店和调用actionCreators

2 个答案: