Problem with Redux stored data in showing in table

Question

I am learning redux I am trying to show my initialstate data in table and also the added data should be presented in table.

This is my postReducer.js file:

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

const postReducer = (state = initialState, action) => {
    switch(action.type) {
      case 'ADD_POST':
        return state.concat([action.data]);
      default:
        return state;
    }
  }
  export default postReducer;

And this is my table.js file:

import React, {Fragment} from "react"


class Table extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            employees: this.props.state
        };

    }


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

export default Table;

I am trying to show in table initialState data of reducer and i failed to do it.

Also i am trying to show add form data in same table

this is my form.js file

import React, { Fragment } from "react"

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



    render() {
        return (
            <form>
                <div className="form-group">
                    <input name="name" type="text" />
                </div>

                <div className="form-group">
                    <input name="age" type="number"/>
                </div>

                <div className="form-group">
                    <input  name="email" type="text"/>
                </div>

                <button onClick={ (data) => this.props.dispatch({type: 'ADD_POST', data})} type="button">SAVE</button>

            </form>
        );
    }
}

export default Form;

And this is my App.js file:

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

class App extends React.Component {

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


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

And this is index.js file

import React from "react";
import ReactDOM from "react-dom";

import App from "./components/App";

import { Provider } from 'react-redux'

import { createStore } from 'redux'
import rootReducer from '../src/redux/reducers/rootReducer'

const store = createStore(rootReducer)


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

Can anyone please help me to display initial state data in table and also form data should be stored in reducer state and it should be displayed in table too?

Thanks

Answer 1

To connect your component to the redux store, you would need to at minimum use connect and a mapStateToProps function. This code assumes you are registering the reducer as "employees". Please note that you do not and should copy over redux mapped props to the component's state:

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);

Also, to be able to use this.props.dispatch, you would need to also connect the Form component:

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

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

    render() {
        return (
            <form>
                <div className="form-group">
                    <input name="name" type="text" />
                </div>

                <div className="form-group">
                    <input name="age" type="number"/>
                </div>

                <div className="form-group">
                    <input  name="email" type="text"/>
                </div>

                <button onClick={ (data) => this.props.dispatch({type: 'ADD_POST', data})} type="button">SAVE</button>

            </form>
        );
    }
}

export default connect(null)(Form);

You can simply/enhance dispatch by taking advantage mapDispatchToProps() which would be passed in as an argument to connect().

Please first review Usage with react as well as the redux tutorial as it looks like you are missing some key concepts of Redux based on your code and question.

Hopefully that helps!