React - failed to add item to list in Redux

2019-08-27 06:40发布

问题:

The scenario is : 1.press a button(Class A-Component) to add a item to a list (Class B-Component).

The initialState for the list and the console.log('search action found') in reducers works perfectly.

But its failed to add one more item in the list.

I have checked the store after i called the "CLICK_SEARCH" action . The number of item in the List (products1) remaining 1 item only(initialState that one). Anyone can help ?

initialState3

 var initialState3 = {
        products1:[{
             id: "123",
              abbreviation: "123",
              case_no: "123",
              created_dt: "31/01/2018",
              last_updated: "11:43:45"

          }]
        }

reducers

function ReducersForSeach(state = initialState3, action) {
      switch(action.type) {
          case 'CLICK_SEARCH': {

          console.log("search action found");
            return {
                      ...state,
                      products1: [...state.products1,
                       { 
                        id: "456",
                        abbreviation: "456",
                        case_no: "456",
                        created_dt: "31/01/2018",
                        last_updated: "11:43:45"
                       }
                      ]
                     }

          }
          default :{
              return state
          }
      }
    }

Component

  var Table  = React.createClass({

      render() {
          const { products1 } = this.props;    
          const tableHeaderColumns = columnData.map((column) => (
                    <TableHeaderColumn 
                    dataField={column.action}
                    isKey={column.isKey}
                    dataSort={column.dataSort}
                    >
                      {column.description} 
                    </TableHeaderColumn>   
                  ))


        return ( 
          <BootstrapTable  height='600'  style={{overflowY:"scroll"}} data={ products1 } options={ options } >
          {tableHeaderColumns}
          </BootstrapTable>
        );
      }
    })

Connection

 function mapStateToPropsFortable(state) {  
        return {  
            products1: state.reducreForSeach.products1
        }  
    }  

    const Table1 = connect(mapStateToPropsFortable,null)(Table);


ReactDOM.render(
        <Provider store={store}>
          <Table1/>  
          </Provider>,

        document.getElementById('divReqListTable')
        );

Store

var rootReducer = Redux.combineReducers({
    reducreForAge,
    reducreForButtonGroup2,
    reducreForSeach
});

var store = Redux.createStore(rootReducer)

回答1:

In the reducer, instead of mutating the state, try this.

function ReducersForSeach(state = initialState3, action) {
  switch(action.type) {
      case 'CLICK_SEARCH': {

      console.log("search action found");
      let {products1} = state;
      products1.push(  { 
                    id: "456",
                    abbreviation: "456",
                    case_no: "456",
                    created_dt: "31/01/2018",
                    last_updated: "11:43:45"
                   })
        return {
                 ...state, products1
                 }

      }
      default :{
          return state
      }
  }
}


标签: reactjs redux