Redux state 在操作分派后未更新

Question

I have a form for users to enter their details and press submit. This is supposed to dispatch an action and update the state by .concat() a class to it. Unfortunately the state isn't updating and I don't know why. If I take out useCallBack() or useEffect() from the code, the emulator freezes and I suspect infinite loops.

Redux Reducer

// Initialised class
import newAccount from '../../models/newAccount'

import { CREATE_ACCOUNT } from '../actions/meals'

const initialState = {
    account: [],
}
const addPerson = (state=initialState, action) =>{
    switch(action.type){
        case CREATE_ACCOUNT:
            const newAccount = new newAccount(
                Date.now().toString(),
                action.accountData.name, 
                action.accountData.image,
                action.accountData.email,
                action.accountData.password
            )
            return { ...state, account: state.account.concat(newAccount) }
    default: 
        return state
    }
}
export default addPerson

Redux action

export const CREATE_ACCOUNT = 'CREATE_ACCOUNT'
export const newAccount = (Id,name,image, email, password) => {
    return {type: CREATE_ACCOUNT, accountData:{
            Id: Date.now().toString(),
            name: name,
            image: image,
            email: email,
            password: password
        }
    }
}

The class

class newAccount {
    constructor( 
        id,
        name,
        image,
        email,
        password
    ){
        this.id = id;
        this.name = name;
        this.image = image;
        this.email = email;
        this.password = password;
    }
}
export default newAccount

The Component

import React, { useState, useCallback, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {newAccount} from '../Store/actions/accounts'
import ImagePicker from '../Components/ImagePicker'

const AddScreen = (props) => {

    const dispatch = useDispatch()
    const [name, setName] = useState('')
    const [selectedImage, setSelectedImage] = useState('')
    const email = useSelector(state => state.account.email)
    const password = useSelector(state => state.account.password)

    const handleSubmit = useCallback(() => {
        dispatch(newAccount(Date.now(),name,selectedImage,email,password))
    },[dispatch, name, selectedImage, email, password])

    useEffect(() => { handleSubmit
        props.navigation.setParams({handleSubmit: handleSubmit})
    },[handleSubmit])
    
    return (
        <View style={styles.container}>
            <View style={styles.card}>
                <ImagePicker onImageSelected={selectedImage} />
                <AddForm email={email} password={password}/>
                <TextInput
                    onChangeText={name => setName(name)}
                    value={name}
                />
            </View>
        </View>
    )
}

export default AddScreen

AddScreen.navigationOptions = (navigationData) => {
    const submit = navigationData.navigation.getParam('handleSubmit')
    return {
        headerTitle: 'Create Account',
        headerRight: () => (
            <TouchableOpacity  onPress={submit}>
                <Text style={styles.createOrange}>Create</Text> 
            </TouchableOpacity>
        )
    }
}

I really don't know why it's not updating.

Answer 1

first of all, you shouldn't store classes in the redux store, the store should only exists of plain objects. but if you really want to store the class:

The real problem seams to be return {...state, account: state.account.concat(newAccount) } . here you concat the existing array with the new class, but that doesn't work.

your store looks like this if you do so:

{
  account: [{
    email: "..."
    id: "..."
    image: "..."
    name: "..."
    password: "...
  }],
}

so your selector ( state.account.email ) will return undefined. you can use ( state.account[0].email )

or you can fix it by fixing the real problem:

return { ...state, account: newAccount }

also your initialState shouldn't be a an array for account as it will never be an array, it will be an Account class (this is why you don't get an error by what you are doing). set it to null .

const initialState = {
  account: null,
}

Answer 2

I really don't know why this doesn't work. Just want to give you an advice to make it more simple and clearer (from my point of view):

You can drop side effects like useEffect . To achieve this just move local state to redux state and then you will be able to just dispatch the action from your navigationOptions component. It could look like:

const AddScreen = () => {
  const name = useSelector(...);
  ...
  const password = useSelector(...);

  // trigger action on something changes, for instance like that:
  const onChange = (key, value) = dispatch(newAccountChange({[key]: value}))

  // return tree of components
}

export const submitNewAccount = () => {
  return (dispatch, getState) => {
    const { id, name, ... } = getState().account;
    dispatch(newAccount(id, name, ...));
  };
}

AddScreen.navigationOptions = (navigationData) => {
  const dispatch = useDispatch();
  const submit = dispatch(submitNewAccount());
  ...
}

I used redux-thunk in this example.

I believe, this approach will give you more flexible way to debug and extend your business logic.