React＆Redux Reducer不会改变

Question

I have a React app built using Redux and React I'm trying to post data. Everything works fine, but I don't know why the reducer doesn't return the action. Does that make sense if I render fetch function after post function? I don't think react works like this way.

scr/actions/userAction.js

export function fetchUsers(data) {
            return{
            type: "USERS",
            payload: fetch('http://rest.learncode.academy/api/johnbob/users',{
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }

            })
            .then(res => res.json())
    }
};

export function postUsers(name, age) {
let users = {
    name,
    age
}
    return{
            type: "USERS_POST",
            payload: fetch('http://rest.learncode.academy/api/johnbob/users',{
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(users),
            })
            .then(res => res.json())

    }

};

src/reducers/userReducer.js

const initalState = {
fetching: false,
fetched: false,
users: [],
error: null
};
export default function(state=initalState, action) {
    switch(action.type){
        case "USERS_PENDING":{
            return {...state, fetching: true,}
        }
        case "USERS_FULFILLED":{
            return {...state, fetching:false, fetched: true, users: action.payload,}
        }
        case "USERS_REJECTED":{
            return {...state, fetching: false, error: action.payload,}
        }
        case "USERS_POST_PENDING":{
            return {...state, fetching: true,}
        }
        case "USERS_POST_FULFILLED":{
              return {...state, fetching:false, fetched: true, users: [],}
        }
        case "USERS_POST_REJECTED":{
            return {...state, fetching: false, error: action.payload,}
        }
        default:
            return state;
    }
}

src/components/layout.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux'; 
import { fetchUsers, postUsers } from '../actions/usersAction';


class Layout extends Component {
constructor(props){
    super(props) 
    this.state = {  
        name: '',
        age: ''}
}

onUserUpdate(filed, event){
    //console.log('onUserUpdate: ' + filed + '==' + event.target.value);
    if (filed === 'name') {
        this.setState({
            name: event.target.value
        })
        return
    }
    if (filed ==='age') {
        this.setState({
            age: event.target.value
        })
        return
    }
}

componentDidMount() {  
  this.props.fetchUsers();
}
  render() {
    const { act } = this.props;

      const fetchUserss = act.users.map(d =>  <tr key={d.id}><td>{d.name}</td><td>{d.age}</td><td></td></tr>);

    return (
      <div className="App">
        <label>
            name:
              </label>
            <input type="text" name="name" onChange={this.onUserUpdate.bind(this, 'name')} placeholder="Enter Name"/>
                <label>
                age:
              </label>
                <input type="text" name="age" onChange={this.onUserUpdate.bind(this, 'age')} placeholder="enter username"/>
                <button onClick={() => this.props.postUsers(this.state.name,this.state.age)}>Add News</button>
            <table>
                <thead>
                <tr>
                 <th>Name</th>
                  <th>age</th>
                </tr>
                </thead>
                <tbody>
                 {fetchUserss}
                </tbody>
            </table>
        </div>
    );
  }
}



function mapStateToProps(state) {
    return {
        act: state.users,
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({fetchUsers, postUsers}, dispatch)
}
export default connect(mapStateToProps, matchDispatchToProps)(Layout);

Please let me know if I miss out any information.

If this has already been asked, I would greatly appreciate if you are able to point me in the right direction.

Thank you so much!

Answer 1

your switch case looks weird:

case "USERS_FULFILLED":{
    return {...state, users: action.payload}
}

case "USERS_POST_FULFILLED":{
    return action.payload;
}
case "USERS_POST_DELETE_FULFILLED":{
    return {...state, users: action.payload}
}

why do you use brachets? it should be:

switch (action.type) {
   case 'USERS_FULLFILED':
       return { ...state, users: action.payload };
}

Answer 2

I found the solution from the example of @Luis Nolazco It's really helped me, I should put action.payload into square brackets

case "USERS_POST_FULFILLED":{
          return {...state, fetching: false,fetched: true, users:[...state.users, action.payload],}
    }

here's the example codesandbox.io/s/MQZWLJloA by @Luis Nolazco