javascript - How can I update state from select options?

Question

My app contains main component, which render data, received from store, at list. Child component allow to select an options. And after user made a choice (one of options at dropdown list), object in store should be updated accordingly. Further, when I refresh the page, I expect updated list to be render.

Main component (TableMain):

 import OperationSelect from "./operationSelect";

 const mapStateToProps = (store) => {
      return {itemsProp: store.fetch.items}
 };

class TableMain extends React.Component {
    // constructor

     getOperationItems = function () {
         this.props.itemsProp.map((item, index) => {
            return (
                <li>key={index} item={item}</li>
            );
         });
     };

    render() {
        return <div>
            {this.getOperationItems()}
            <OperationSelect />
              </div>;
        }
    }

  export default connect(mapStateToProps)(TableMain)

Initial state:

 export default {
     items: [
              {
               'Date': null,
               'Operation': 'revenue',
              }
           ]
    }

Update-action:

 export function selectOperation(payload) {
     return {
         type: 'SELECT',
         payload: payload,
       };
  }

I omit get-action, because its work well.

Update reducer:

  import initialState from '../constants/initialState';

  export default function update(state = initialState, action) {
     switch (action.type) {
         case 'SELECT':
            return {
               ...state,
               [action.payload.key]: action.payload.value
             };
        default:
            return state;
      }
 } 

Combine-reducers:

 import {combineReducers} from 'redux';
 import fetch from '../reducers/fetchReducer';
 import update from '../reducers/updateReducer';

 const rootReducer = combineReducers({fetch, update});
 export default rootReducer;

And child-component for select-operation providing:

const mapDispatchToProps = (dispatch) => {
    return {
         selectOperation: (input) => dispatch({type: 'SELECT', payload: input})
      }
 };

 const mapStateToProps = (store) => {
      return {itemsProp: store.fetch.items}
 };

class OperationSelect extends React.Component {
   // constructor

    handleChange(event) {
         this.props.selectOperation({
            key: 'Operation',
            value: event.target.value
         });
       console.log(`items = ${JSON.stringify(this.props.itemsProp)}`);
  }; 

    render() {
        return (
           <label>
               <select onChange={this.handleChange}>
                   <option selected="select value"></option>
                   <option value="value1">Option1</option>
                   <option value="value2">Option2</option>
               </select>
           </label>
        );
     }
   }

   export default connect(mapStateToProps, mapDispatchToProps)(OperationSelect).

Container component exists, but omitted.

When I simply load a page (without any use choice) everything is well. App fetch from store initial-state data: {'Date': null,'Operation': 'revenue'}.

When I'm trying to select an option in dropdown list (for example, "value1"), I expect, updated data will be received from redux-store. For example - {'Date': null,'Operation': 'value1'}. But contrary to expectations I receive from store old an value - {'Date': null,'Operation': 'revenue'}.

In Browser-Console I see the following message:

index.js:1437 Unexpected key "items" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "fetch", "update". Unexpected keys will be ignored.

Please, advise me, how could I update object-state in redux-store from Select dropdown-list?

Answer 1

You can try using "redux-persist" in your application. This package delays the app UI rendering until your persisted state has been retrieved and saved to redux after page refresh. You can read the documentation at https://www.npmjs.com/package/redux-persist

Alternatively, you can configure the dropdown in a way that it doesn't refresh the page, just refresh the affected values on the page and it will give more cleaner UI experience.