не в состоянии управлять состоянием с использованием избыточного кода в реактивном нативном проекте - PullRequest
Новая
       33

не в состоянии управлять состоянием с использованием избыточного кода в реактивном нативном проекте

0 голосов
/ 20 апреля 2020

Я новичок в реакции нативной разработки. И я создал этот пример приложения для заметок, используя Redux для реагирования на нативный. В этом приложении пользователь должен иметь возможность добавлять заметки, и эта заметка должна управляться через онлайн-хранилище. И я создал необходимые действия и редуктор для добавления функциональности заметки. Однако я не смог добавить новую заметку в магазин. Я попытался отладить, и когда он достигает случая "ADD_Note" в редукторе, он автоматически переходит в случай по умолчанию. И независимо от того, какое строковое значение или примечание проходят через действие, оно становится неопределенным в редукторе.

Пожалуйста, обратитесь к моему коду для добавления экрана примечания 

import React, {useState, useEffect} from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  Button,
  FlatList,
} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import * as NoteActions from '../store/actions/Note'; // import note actions

const NoteScreen = () => {
  const [note, setNote] = useState('');

  const dispatch = useDispatch(); // use dispatch


  const noteHandler = text => {
    setNote(text);
  };


  return (
    <View style={styles.container}>
      <View>
        <TextInput
          style={styles.textInput}
          placeholder="Enter a note"
          onChangeText={noteHandler}
          value={note}
        />
        <Button
          title="Add"
          onPress={() => {
            console.log(note);
            dispatch(NoteActions.addNote(note));
          }}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    margin: 10,
  },
  textInput: {
    width: '100%',
    marginBottom: 10,
    textAlign: 'center',
    borderBottomWidth: 1,
  },
});

export default NoteScreen;

А ниже приведено действие js файл. 

// action types
export const ADD_NOTE = 'ADD_NOTE'

//action creators
export function addNote(note){
    return{
        type:ADD_NOTE,
        date:note
    }
}

А ниже находится редуктор js файл 

// initial state
const initialState ={
    noteList:[]
}

// import actions
import ADD_NOTE from '../actions/Note';

function noteReducer (state=initialState, action){
    debugger;
    switch(action.type){
        case ADD_NOTE:
            const newNote = action.data
            return{
                ...state,
                noteList: state.noteList, newNote
            }
        default:
            return state;    
    }
}

экспорт по умолчанию noteReducer;

enter image description here

Пожалуйста, помогите мне.

Заранее спасибо, Йохан

1 Ответ

1 голос
/ 20 апреля 2020

Вам нужно добавить слой dispatch в вашем действии, а также посмотреть дату опечатки вместо данных 

export const addNote = (note) => (dispatch, getState) => {
   return dispatch({
       type:ADD_NOTE,
       data :note 
     })
  }
...