Состояние обновляется, также оно отображается с помощью реквизита, в console.log, однако компонент не выполняет повторную визуализацию.

Question

Состояние обновляется , также предоставляет последние данные для реквизита с mapStateToProps , однако не отображает дочерний компонент StudentList и Student в Mapметод после обновления реквизита.

После добавления учащегося вы можете видеть обновленное состояние, которое отправляется компоненту формы.

Вот мой код,

Index.js

   var store = createStore(studentFormReducer);

    ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.

    serviceWorker.unregister();

App.js

import React, { Component } from 'react';
import './App.css';
import StudentFormContainer from './containers/StudentFormContainer';
import StudentList from './components/StudentList'


class App extends Component {
    render() {
        return (
            <div className="container-fluid">
                <StudentFormContainer></StudentFormContainer>
                <StudentList></StudentList>
            </div>

        );
    }
}

export default App;

StudentForm: компонент

import React, { Component } from 'react';

 export default class StudentForm extends Component {

    constructor(){
        super();
        this.state={
            student : {
                name:"",

            }
        };

    }

    render() {
        return (
            <div className="formcontainer">
                <button type="button" name="addstudent" id="addstudent" onClick={(e)=>{this.props.addStudent(this.state.student); console.log(this.props.currentstate)}} className="btn btn-primary btn-lg ">Add student</button>
                <form>
                    <div className="form-group">
                      <label htmlFor="name">Student name</label>
                      <input type="text" name="name" id="name" value={this.state.student.name} onChange={(e)=>{e.preventDefault(); this.setState({student:{name : e.target.value}})}} className="form-control" placeholder="Enter student name" aria-describedby="helpId"/>

                    </div>
                </form>
            </div>
        );
    }
}

StudentFormContainer: контейнер

import {connect} from 'react-redux';
import StudentForm from '../components/StudentForm'
import {addStudentAction} from '../actions/index'

const mapStateToProps = (state)=>{
    console.log("New state updated");
    return{
        studentlist : state.studentlist,
        currentstate : state
    };
}

const mapDispatchToProps = (dispatch)=>{
    return{
        addStudent : (student)=>{console.log("Dispatching");dispatch(addStudentAction(student))}
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(StudentForm)

StudentList: компонент + контейнер

import React, { Component } from 'react';
import {connect} from 'react-redux';

import Student from './Student'

class StudentList extends Component {

    render() {
        return (
            <div className="studentlist">

                {this.props.studentlist.map(
                    (student,index)=>(<Student key={index} student={student}></Student>))
                }
                </div>
        );
    }
}

const mapStateToProps = (state)=>{

    return{
        studentlist : state.studentlist,
        currentstate : state
    };
}
export default connect(mapStateToProps)(StudentList)

Редуктор ученической формы

export const studentFormReducer = (state={},action)=>{
    if(action.type=="ADD_STUDENT"){
        var id = state.studentlist.length+1;
        action.student.id = id;
        state.studentlist.push(action.student);
        return state;
    }
    else{
        if(state.studentlist===undefined){
            var newstate2 = {studentlist:[]}
            return newstate2;
        }else{
            return state;
        }
    }
}

Действие

export const addStudentAction = (student)=>
{
    return{
        type : "ADD_STUDENT",
        student : student
    }
};

Answer 1

state должно быть неизменным.В своем коде вы непосредственно управляли объектом state.

state.studentlist.push(action.student);

Используя оператор распространения объекта , вы сможете исправить это:

switch(action.type) {
  case "ADD_STUDENT":
    let student = action.student;
    student.id = state.studentList.length + 1; // set student id
    return {
      ...state,
      studentList: [
        ...state.studentList,
        student // add new student to student list
      ]
    };
  default:
    return state;
}

Answer 2

Я думаю, что вы пытаетесь добавить нового студента и обновить этот объект студента в существующий массив, если я не ошибаюсь.Это не лучший выбор для использования условия if в функции редуктора, лучше использовать переключатель.

const initialState = {
  studentlist: []
}

export const studentFormReducer = (state=initialState, action)=>{
  switch(action.type){
    case "ADD_STUDENT":
      return{
        ...state,
        studentlist: [...state.studentlist, action.student]
      }
     default: 
      return state;
  }
}

Answer 3

Попробуйте это в редукторе

case ADD_STUDENT :
    return { 
        ...state,
        studentList: state.studentList.concat(action.student)
    }