React-Redux create operation failed with form

Question

I am learning React and Redux I have successfully implement read operation and displaeed data in table, now i am trying to implement add operation with a form, it throws me an error named map not a function. this is my postReducer.js file

var initialState = {
  employees: [{name: 'jhon', age: '23', email: 'a@a'}, {name: 'doe', age: '24', email: 'b@a'}] 
};

var postReducer = (state = initialState, action) => {
    switch(action.type) {
      case 'ADD_POST':
        return state.employees.push(action.data);
      default:
        return state;
    }
  };


export default postReducer;

and this is my table.js file

import React, {Fragment} from "react";
import { connect } from "react-redux";

class Table extends React.Component {
    render() {
        return (
            <Fragment>
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Email</th>
                    </tr>
                </thead>
                <tbody>
                {this.props.employees.map((item, index) => (
                    <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td>{item.email}</td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

const mapStateToProps = (state) => ({ employees: state.employees });

export default connect(mapStateToProps)(Table);

Note, there is no issue table.js file

and this is my form.js file

import React, { Fragment } from "react"
import { connect } from 'react-redux'

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: '', age: '', email: ''};
        this.onHandleChange = this.onHandleChange.bind(this);
        this.submit = this.submit.bind(this);
    }

    submit(event) {
        const data = {
            name: this.state.name, age: this.state.age, email: this.state.email
        };
        this.props.dispatch({type: 'ADD_POST', data})
    }

    onHandleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }


    render() {
        return (
            <form>
                <div className="form-group">
                    <input onChange={(event) => this.onHandleChange(event)} value={this.state.name} name="name" type="text" />
                </div>

                <div className="form-group">
                    <input onChange={(event) => this.onHandleChange(event)} value={this.state.age} name="age" type="number"/>
                </div>

                <div className="form-group">
                    <input onChange={(event) => this.onHandleChange(event)} value={this.state.email}  name="email" type="text"/>
                </div>

                <button onClick={(event) => this.submit(event)} type="button">SAVE</button>

            </form>
        );
    }
}

export default connect(null)(Form);

I suspect the problem with form.js file, not sure,

and this is App.js file

import React from "react"
import Table from "./table"
import Form from '../components/form'

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <React.Fragment>   
              <Form />          
            <table>
                <Table />
            </table>
            </React.Fragment>
        );
    }
}
export default App;

Can anyone please help me to fix my add form? I want, when i submit data, the data should be displayed on table. currently, the table showing hard coded data, but now i want, the table should contain both hard coded data and form submitted data. can anyone help me?

Answer 1

In your reducer, you should not push to state as that will mutate it. Instead you should use the spread operator to create a new list and add that the store.

var postReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'ADD_POST':
      // return state.employees.push(action.data);
      return {
        ...state,
        employees: [...state.employees, action.data],
      }
    default:
      return state;
  }
};