Question

尝试将redux实施到我现有的应用程序中（这是第一次）。本质上，尝试做一些非常简单的事情，使用文本输入将字符串存储在存储中，然后使用redux将其中继回另一个组件中。但是，尽管分派了动作，但是当我将其记录到控制台时，对于输入的字符串，我一直保持“未定义”状态。不知道我要去哪里错了，其他问题对于我的初学者来说并不清楚。

我已经定义了单个化简的减速器，将它们组合到索引中，在我的商店的提供程序中创建了商店（通过了我的组合化减速器），包装了导航（整个应用），创建了一个调度和事件/动作来激活该调度（基本上是当用户输入字符并按下继续按钮时。）

textInputPost.js：（归约器）

permission_role

index.js：（rootReducer-组合减速器）

const initialState = {
    textInputValue: '',
};

const textInputReducer = (state = initialState, action) => {
    console.log('textInputReducer', action);
    switch(action.type){
        case 'ADD_INPUT_TEXT':
            return { textInputValue: action.text };
        case 'RESET_INPUT_TEXT':
            return { textInputValue: ''}
    default:
        return state;
    }
}

export default textInputReducer;

Index.js：（商店）

import { combineReducers } from 'redux';

import photoInputPost from './photoInputPost'
import cameraInputPost from './cameraInputPost'
import textInputPost from './textInputPost'

export default rootReducer = combineReducers({
    text: textInputPost
})

App.js：（提供程序包装在React Navigation中）

import { createStore } from 'redux'
import rootReducer from './../reducers/index'

export default Store = createStore(rootReducer)

AddTextModal.js：（用于更新textInput上存储状态的组件）

return (
            <Provider store={Store}>
                <Navigation/>
            </Provider>
        );

UploadScreen.js：（用于中继AddTextModal文本输入的存储状态的组件）

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, KeyboardAvoidingView, TextInput } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { FontAwesome5, Feather } from "@expo/vector-icons";
import { connect } from 'react-redux'

import ModalContainer from '../../App'

class AddTextModal extends React.Component {

    continueUpload = (textInput)  => {
        this.props.addText(textInput)
        console.log(this.props.textInputValue)
        this.props.navigation.navigate('Upload')
    }

    render() {
        return(
                  <View style={{backgroundColor:"#000000CC", flex:1}}>
                    <View style={{ backgroundColor:"#ffffff", marginLeft: 0, marginRight: 0, marginTop: 180, padding: 20, borderTopLeftRadius: 20, borderTopRightRadius: 20, flex: 1, }}>
                        <View style={styles.header}>
                            <TouchableOpacity style={{position: 'absolute'}} onPress={() => this.props.navigation.navigate('Home')}>
                                <Text style={styles.buttonFont}>Back</Text>
                            </TouchableOpacity>
                            <Text style={styles.headerText}>Write Something</Text>
                            <TouchableOpacity style={{position: 'absolute', right: 0}} onPress={(textInput) => this.continueUpload(textInput)}>
                                <Text style={styles.buttonFont}>Continue</Text>
                            </TouchableOpacity>

                        </View>
                        <View style={styles.uploadTextInput}>
                            <Feather name="message-square" size={14} color="grey" />
                            <TextInput style={{paddingLeft: 5, fontSize: 14}}
                                placeholder="What do you want to say?"
                                defaultValue={this.props.textInputValue}
                                onChangeText={textInput => this.props.addText(textInput)}
                                />
                        </View>
                    </View>
                 </View>
        );
    }
}

//#6 mapStateToProps to access store from our component
function mapStateToProps(state){
    return {
        textInputValue: state.textInputValue
    }
}

//#10. matchDispatchertoProps to establish dispatcher for actions. These actions will then go to functions in the reducer to change the app state
function mapDispatchToProps(dispatch) {
    return {
        addText: () => dispatch({type: 'ADD_INPUT_TEXT'}),
    }
}

Answer 1

我相信您的问题是您尚未在mapDispatchToProps函数中指定有效负载。尝试重新编写mapDispatchToProps函数，使其类似于：

function mapDispatchToProps(dispatch) {
    return {
        addText: (payload) => dispatch({type: 'ADD_INPUT_TEXT', payload: payload}),
    }
}

由于我将您的有效负载重命名为“ payload”，因此在减速器中将“ action.text”更改为“ action.payload”：

const initialState = {
    textInputValue: '',
};

const textInputReducer = (state = initialState, action) => {
    console.log('textInputReducer', action);
    switch(action.type){
        case 'ADD_INPUT_TEXT':
            return { textInputValue: action.payload };
        case 'RESET_INPUT_TEXT':
            return { textInputValue: ''}
    default:
        return state;
    }
}

export default textInputReducer;

在Redux（React Native）上调度并访问存储状态-返回未定义

1 个答案: