Question

我有一个使用Redux和React构建的React应用程序我尝试发布数据。一切正常，但我不知道减速器为什么不回复动作。如果我在post函数后渲染fetch函数会有意义吗？我不认为反应是这样的。

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

这是@Luis Nolazco的例子codesandbox.io/s/MQZWLJloA

反应＆amp; Redux Reducer not changin

2 个答案: