React + Redux aktualisiert nicht Shop

Question

Ich mache Telefonliste mit React und Redux, und habe das Problem. Was sollte erwartet werden: Benutzer legt seine Daten in modaler Form und wenn er auf Senden klicken Taste - onClick Funktion löst und Daten an den Redux-Speicher, und nach dem Speichern geht es an die localStorage, wo alle Daten gespeichert werden.

Das Problem: Anstatt ein Array mit Objekt mit Daten im Speicher zu erstellen, wurde das leere Array erstellt. Nach dem nächsten Klick auf Submit button - Daten vom ersten Klick puts statt leeres Array. Und so weiter.

Hatte das gleiche Problem mit Plain reagieren SetState.

Der Code:

App:

import React from "react"; 
import { Input } from "../components/Input"; 
import { Table } from "../components/Table"; 
import { ButtonAdd } from "../components/ButtonAdd"; 
import { connect } from "react-redux"; 
import { setInput, setUser, setFormModalStatus, setSuccessModalStatus} from 
"../actions/dataActions"; 

class App extends React.Component { 

constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.openFormModal = this.openFormModal.bind(this); 
    this.closeFormModal = this.closeFormModal.bind(this); 
    this.openSuccessModal = this.openSuccessModal.bind(this); 
    this.closeSuccessModal = this.closeSuccessModal.bind(this); 
} 

openFormModal() { 
    this.props.setFormModalStatus(true); 
} 

closeFormModal() { 
    this.props.setFormModalStatus(false); 
} 

openSuccessModal() { 
    this.props.setSuccessModalStatus(true); 
} 

closeSuccessModal() { 
    this.props.setSuccessModalStatus(false); 
} 

handleSubmit(e) { 
    this.closeFormModal(); 
    this.openSuccessModal(); //this is for modals 

    const datas = this.props.form.input.values //{name: 'Rick', tel: 12345} 
    this.props.setUser(datas); //making dispatch with data 

    console.log(this.props.data.users); // [] - the issue 

    const testData = {name: Josh, tel: 54321}; 
    this.props.setUser(testData); 

    console.log(this.props.data.users); //[{name: 'Rick, tel: 12345}] 

    e.preventDefault(); 
    this.props.form.input.values = ''; 
} 
render() { 
    return (
     <div className="container"> 
      <div className="row"> 
       <div className="col-xs-12 col-md-10 col-md-offset-1"> 
        <div className="box"> 
         <Input input={this.props.input}/> 
         <ButtonAdd 
          formModalStatus= 
{this.props.data.formModalStatus} 
          successModalStatus= 
{this.props.data.successModalStatus} 
          openFormModal={this.openFormModal} 
          closeFormModal={this.closeFormModal} 
          closeSuccessModal={this.closeSuccessModal} 
          handleSubmit={this.handleSubmit} 
         /> 
        </div> 
        <Table /> 
       </div> 
      </div> 
     </div> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     data: state.data, 
     form: state.form 
    }; 
    }; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     setInput: (input) => { 
      dispatch(setInput(input)); 
     }, 
     setUser: (user) => { 
      dispatch(setUser(user)); 
     }, 
     setFormModalStatus: (boolean) => { 
      dispatch(setFormModalStatus(boolean)); 
     }, 
     setSuccessModalStatus: (boolean) => { 
      dispatch(setSuccessModalStatus(boolean)); 
     } 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(App); 

Reducer:

const dataReducer = (state = { 
    input: "", 
    users: [], 
    formModalStatus: false, 
    successModalStatus: false 
}, action) => { 
    switch (action.type) { 
     case "SET_INPUT": 
      state = { 
       ...state, 
       input: action.payload 
      }; 
      break; 
     case "SET_USER": 
      state = { 
       ...state, 
       users: [...state.users, action.payload] 
      }; 
      break; 
     case "SET_FORM_MODAL_STATUS": 
      state = { 
       ...state, 
       formModalStatus: action.payload 
      } 
     case "SET_SUCCESS_MODAL_STATUS": 
      state = { 
       ...state, 
       successModalStatus: action.payload 
      } 
    } 
    return state; 
}; 

export default dataReducer; 

Appropriane Aktion:

export function setUser(user) { 
    return { 
     type: "SET_USER", 
     payload: user 
    }; 
} 

Answer 1

Wenn Sie eine Arbeitsprobe auf WebpackBin oder etwas bieten könnte , das wou ld helfen, das Problem besser zu debuggen.

Aus meiner Erfahrung geschieht dies normalerweise, wenn der Zustand mutiert ist. Könnten Sie das folgende Format auf Ihrem Minderer versuchen Sie es mit:

state = { 
      state.set('users', [...state.users, action.payload]) 
     }; 

Die bestehende Funktionalität des bestehenden Zustand bei state=...

state = { 
      ...state, 
      users: [...state.users, action.payload] 
     }; 

PS mutiert: Auch du bist break Aussagen in Ihrem letzten zwei vermißt Fälle in Ihrem Reducer. Und Ihr default Fall

Answer 2

Sie sollten Zustand nie direkt in React oder Redux mutieren. Mit Redux möchten Sie immer ein neues Objekt zurückgeben, um den vorherigen Zustand zu ersetzen.

Vielleicht versuchen Sie stattdessen so etwas?

switch (action.type) { 
    case 'SET_INPUT': 
     return { 
      ...state, 
      input: action.payload 
     }; 
    case 'SET_USER': 
     return { 
      ...state, 
      users: [...state.users, action.payload] 
     }; 
    case 'SET_FORM_MODAL_STATUS': 
     return { 
      ...state, 
      formModalStatus: action.payload 
     }; 
    case 'SET_SUCCESS_MODAL_STATUS': 
     return { 
      ...state, 
      successModalStatus: action.payload 
     }; 
    default: 
     return state; 
}