我想显示用户创建的列表/React Native + Redux

Question

我希望我的应用程序使用 Redux 显示用户在其下的标签中输入的内容。

这是我的容器：

    const mapStateToProps = state => ({
  text: state
})

const mapDispatchToProps = (dispatch) => ({
  addToList: () => { dispatch({ type: 'ADD_LIST' }) },
})

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

这是我的组件：

class TodoList extends Component {
  render() {
    return (
      <View>
        <TextInput
          style={{height: 40, width: 300}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.props.text}
        />
        <Button
          title="Submit"
          onPress={this.props.addToList}/>
        <View>
          <Text>{this.props.text}</Text>
        </View>
      </View>
    )
  }
}



export default TodoList;

这里是商店：

export const todoList = (state = [], action = {}) => {
  switch (action.type) {
  case 'ADD_LIST':
    return [
        ...state,
        action.todo
    ];
  default:
    return state;
  }
}

let storeTodoList = createStore(todoList);

export default storeTodoList;

所以我正在尝试输入文本，将其添加到存储在商店中的列表中，然后显示它，但我完全不知道如何做到这一点......

Answer 1

这里发生了一些事情......

1. 你的onChangeText 监听器没有做任何事情。您需要捕获输入到组件中的文本并将其发送给您的调度员。
2. 您需要包含作为动作创建者的一部分传入的新文本。
3. mapStateToProps 负责获取处于应用程序状态的元素并将其映射到 props 以供您的组件使用。对于此示例，您的应用程序状态非常简单。只是{ text: 'SOME TEXT' }。
4. 你需要为你的 Redux store 创建一个Provider。它应该在您应用的根级别运行。

以下是所有部分：

App.js（创建 Provider 的应用控制器）

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import todoList from './actions/Reducer';
import { createStore } from 'redux';
import Root from './Root';

class App extends Component {
  store = createStore(todoList);

  render() {
    return (
        <Provider store={this.store}>
          <Root/>
        </Provider>
    )
  }
}

export default App;

Root.js

import React, { Component } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { connect } from 'react-redux';

class Root extends Component {
  render() {
    const displayText = this.props.textList.join();

    return (
        <View>
          <TextInput
              style={{height: 40, width: 300}}
              placeholder="Type here to translate!"
              onChangeText={(text) => this.props.updateField(text)}
          />
          <Button
              title="Submit"
              onPress={() => this.props.addToList(this.props.text)}/>
          <View>
            <Text>{displayText}</Text>
          </View>
        </View>
    )
  }
}

const mapStateToProps = state => ({
  text: state.textField,
  textList: state.list
});

const mapDispatchToProps = (dispatch) => ({
  updateField: (newText) => { dispatch({ type: 'FIELD_CHANGE', text: newText })},
  addToList: (text) => { dispatch({ type: 'ADD_LIST', text: text }) },
});

export default connect(mapStateToProps, mapDispatchToProps)(Root)

Reducer.js（控制你的状态对象）

const INITIAL_STATE = {
  textField: '',
  list: []
};

export default todoList = (state = INITIAL_STATE, action = {}) => {
  switch (action.type) {
    case 'FIELD_CHANGE':
      return {
        ...state,
        textField: action.text
      };
    case 'ADD_LIST':
      return {
        textField: '',
        list: [...state.list, action.text]
      };
    default:
      return state;
  }
};

编辑更改示例以添加到列表中。注意：这不是在 RN 中显示项目列表的正确方式。我只是将字符串放入示例中的 Text 字段中。使用FlatList 正确显示项目列表。