CODEWITHSUNDEEP
reduxreact-redux
Riya1669
Riya1669

Reputation: 19

Popup and Redux Reducers

I'd like to know how to handle specific use case with redux reducer. To give an example, say I have a form with a DataGrid/Table. On Edit button click from a row, I want to open the popup with seleted row-data. After editing the data, On Popup-Submit button click, I want to update the Table/DataGrid (i.e. DataGrid will now should have the edited values).

I've written two separate Components 1. MainPage.js and its corresponding reducer MainPageReducer (Employee List) 2. PopupPage.js and its corresponding reducer PopupPageReducer (Selected Employee)

How these two reducers share the state?

Upvotes: 0

Views: 453

Answers (1)

Sean Kwon
Sean Kwon

Reputation: 907

You may need to read this first http://redux.js.org/docs/basics/UsageWithReact.html

The main concept is that through the connect function, you would simply map needed properties of your state to the properties of your component i.e MapStateToProps. So in your case, imagine that your state, for contrived purposes, is structed like so:

{employees: {employees: {1: {id: 1, name: 'Foo'}}, editedEmployeeId: 1}
  • You could map the array of employees to an employees property for your EmployeeList component whilst also mapping a dispatch function, named editEmployee(id) to a click function on each row in the table.
  • You could map [the employee with the associated editedEmployeeId] to the individual employee in your employees array for your popup component

It may be efficient to just use one reducer instead of two. Specifically, if you're making an update to an individual employee then you would call an EDIT_EMPLOYEE action and then a SAVE_EMPLOYEE action on save. After the SAVE_EMPLOYEE action, then, I assume, you'd call a post method, and then react-redux would re-render your entire list.

It could look like this:

function employees(state = {editedEmployeeId: undefined, employees = []}, action) {
    switch(action.type) {
        case EDIT_EMPLOYEE:
            return Object.assign({}, state, {editedEmployee: action.employee_id})
        case SAVE_EMPLOYEE:
            return Object.assign({}, state, {employees: action.employees});
        default:
            return state;
    }
}

There are great holes in my answer because the question you're asking might be too broad; I'm presuming you don't fully understand how the connect, subscribe, and dispatch functions work.

Like one of the comments said, reducers don't share state. They simply take the previous version of your state and return another version of it. Anyways, hope this helps. Read the redux docs!

Upvotes: 1

Related Questions