React＆Redux Reducer不會改變

Question

我有一個使用Redux和React構建的React應用，我正在嘗試發布數據。 一切正常，但是我不知道為什么減速器不返回動作。 如果在post函數之后渲染fetch函數，那有意義嗎？ 我不認為React這樣工作。

SCR /動作/ 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 /減速器/ 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 /組件/ 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);

如果我錯過任何信息，請告訴我。

如果已經問過這個問題，如果您能指出正確的方向，我將不勝感激。

非常感謝！

Answer 1

您的開關盒看起來很奇怪：

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}
}

為什么要使用Brachets？ 它應該是：

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

Answer 2

我從@Luis Nolazco的示例中找到了解決方案，這確實對我有幫助，我應該將action.payload放在方括號中

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

這里的例子codesandbox.io/s/MQZWLJloA通過@Luis Nolazco