如何使用多个数组在 React Native 中使用 Redux 存储状态值

Question

Here I have use Redux to manage state value but is not working.. And i have two arrays to hold the state values but it is not showing any record i don't know why it is not working..

notesReducer.js

import remove from 'lodash.remove'

// Action Types

export const ADD_NOTE = 'ADD_NOTE'
export const DELETE_NOTE = 'DELETE_NOTE'
export const ADD_NUMBER = 'ADD_NUMBER'
export const DELETE_NUMBER = 'DELETE_NUMBER'


// Action Creators

let noteID = 0
let numberID = 0

export function addnote(note) {
  return {
    type: ADD_NOTE,
    id: noteID++,
    note
  }
}

export function deletenote(id) {
  return {
    type: DELETE_NOTE,
    payload: id
  }
}

export function addnumber(number) {
  return {
    type: ADD_NUMBER,
    id: numberID++,
    number
  }
}

export function deletenumber(id) {
  return {
    type: DELETE_NUMBER,
    payload: id
  }
}

// reducer

const INITIAL_STATE = {
  note: [],  // for holds notes
  number: []  // for holds numbers
};

function notesReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case ADD_NOTE:
      return {
        ...state,
        note: [
          ...state.note,
          {
              id: action.id,
              note: action.note
          }
       ]
      };

      case DELETE_NOTE:
        const note = remove(state.note, obj => obj.id != action.payload);
  
        return {...state, note};

    case ADD_NUMBER:
      return {
        ...state,
        number: [
            ...state.number,
            {
              id: action.id,
              number: action.number
            }
        ]
      };

      case DELETE_NUMBER:
        const number = remove(state.number, obj => obj.id != action.payload);
 
        return {...state, number}

    default:
      return state
  }
}

export default notesReducer

And single Store store.js

import { createStore } from 'redux'
import notesReducer from './notesApp'

const store = createStore(notesReducer)

export default store

ViewNotes.js

import React from 'react'
import { Button, StyleSheet, View, FlatList } from 'react-native'
import { Text, FAB, List } from 'react-native-paper'
import { useSelector, useDispatch } from 'react-redux'
import { addnote, deletenote } from '../redux/notesApp'
import { Ionicons } from "react-native-vector-icons";

import Header from '../components/Header'

function ViewNotes({ navigation }) {
  const notes = useSelector(state => state)
  const dispatch = useDispatch()
  const addNote = note => dispatch(addnote(note))
  const deleteNote = id => dispatch(deletenote(id))

  return (
    <>
      <Header titleText='White List' />
      <View style={styles.container}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
        {notes.length === 0 ? (
          <View style={styles.titleContainer}>
            <Text style={styles.title}>You do not have any notes</Text>
          </View>
        ) : (
          <FlatList
            data={notes}
            renderItem={({ item }) => (
              <List.Item
                title={item.note.noteTitle}
                description={item.note.noteValue}
                right={props => <List.Icon {...props} icon="close" />}
                descriptionNumberOfLines={1}
                titleStyle={styles.listTitle}
                onPress={() => deleteNote(item.id)}
              />
            )}
            keyExtractor={item => item.id.toString()}
          />
        )}
        <FAB
          style={styles.fab}
          small
          icon='plus'
          label='Add new number'
          onPress={() =>
            navigation.navigate('AddNotes', {
              addNote
            })
          }
        />
      </View>
    </>
  )
}

ViewNotes.navigationOptions = {
  title : 'Always Allows Calls'
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 10,
    paddingVertical: 20
  },
  titleContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1
  },
  title: {
    fontSize: 20
  },
  fab: {
    position: 'absolute',
    margin: 20,
    right: 0,
    bottom: 10
  },
  listTitle: {
    fontSize: 20
  }
})

export default ViewNotes

AddNote.js

import React, { useState } from 'react'
import { View, StyleSheet } from 'react-native'
import { IconButton, TextInput, FAB } from 'react-native-paper'
import Header from '../components/Header'

function AddNote({ navigation }) {
  const [noteTitle, setNoteTitle] = useState('')
  const [noteValue, setNoteValue] = useState('')

  function onSaveNote() {
    navigation.state.params.addNote({ noteTitle, noteValue })
    navigation.goBack()
  }
  return (
    <>
      <Header titleText='Add a new number' />
      <IconButton
        icon='close'
        size={25}
        color='white'
        onPress={() => navigation.goBack()}
        style={styles.iconButton}
      />
      <View style={styles.container}>
        <TextInput
          label='Add Title Here'
          value={noteTitle}
          mode='outlined'
          onChangeText={setNoteTitle}
          style={styles.title}
        />
        <TextInput
          label='Add Note Here'
          value={noteValue}
          onChangeText={setNoteValue}
          mode='flat'
          multiline={true}
          style={styles.text}
          scrollEnabled={true}
          returnKeyType='done'
          blurOnSubmit={true}
        />
        <FAB
          style={styles.fab}
          small
          icon='check'
          disabled={noteTitle == '' ? true : false}
          onPress={() => onSaveNote()}
        />
      </View>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  iconButton: {
    backgroundColor: 'rgba(46, 113, 102, 0.8)',
    position: 'absolute',
    right: 0,
    top: 40,
    margin: 10
  },
  title: {
    fontSize: 24,
    marginBottom: 20
  },
  text: {
    height: 300,
    fontSize: 16
  },
  fab: {
    position: 'absolute',
    margin: 20,
    right: 0,
    bottom: 0
  }
})

export default AddNote

It is not Showing any record So How i fixed it.. Please Help me..

Answer 1

Change useSelector(state => state) to :

useSelector(state => state.note)

Because your store is like {note: [], number: []}