CODEWITHSUNDEEP
reactjsreduxreact-reduxreact-hooks
Shadow Walker
Shadow Walker

Reputation: 1199

How to pass data from state in redux to a react hook state

In my react/redux app, i have data already in the state found in redux and i want to pass that data to my react useState in order to serve the component with the data in terms of getting the current state data or updating the state data.

I have tried but my way is not working. What is the most efficient way of going about solving this issue with react hook. Also how to configure the react useEffect properly.

// action
import { HrEmployeeData } from "../../actions/employeeHR";

const EmployeeTable = ({ employeesDetail, HrEmployeeData }) => {

  const [employeesDetail, setEmployeesDetail] = React.useState([]);

  useEffect(() => {
    HrEmployeeData();
  }, []);

  const classes = useStyles();

  const columns = [
    { name: "name", label: "Name" },
    { name: "phone_no", label: "Contact" },
    { name: "email", label: "Email" },
    { name: "department", label: "Department" },
    { name: "job_title", label: "Title" },
    { name: "salary", label: "Salary" },
    { name: "date_employed", label: "Date Employed" },
    {
      name: "Action",
      options: {
        filter: true,
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <button
              onClick={() =>
                window.alert(`Clicked "Edit" for row ${tableMeta.rowIndex}`)
              }
            >
              Edit
            </button>
          );
        },
      },
    },
  ];

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <MUIDataTable
              title={"Employees Records"}
              data={employeesDetail} <--- WHERE THE DATA IS BEEING USED
              columns={columns}
              options={options}
            />
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
};

EmployeeTable.propTypes = {
  employeesDetail: PropTypes.object,
};

const mapStateToProps = (state) => ({
  employeesDetail: state.employeeHR.employeesDetail,
});

export default connect(mapStateToProps, { HrEmployeeData })(EmployeeTable);

Upvotes: 1

Views: 2474

Answers (1)

emiacc
emiacc

Reputation: 59

You don't have to pass the data from the redux store the state. The mechanism to use the redux store in components is "props". In this case you're already mapping store to props and you can use it in the components. Just remove the useState line.

Upvotes: 3

Related Questions