React - prawidłowy obieg danych i update state komponentów

Posiadam obecnie container który posiada jeden state do którego ładuje dane pozyskane z api. Dane to rozdzielam przez propsy to kilku komponentów. I teraz mam kilka pytań:

1. Gdy wchodze w edycje tego containera dane aktualizuje za pomocą:

componentWillReceiveProps(nextProps) {
        if (nextProps.data.mediaSimplifiedElements) {
            this.setState({
                _mediaSimplified: nextProps.data.mediaSimplifiedElements
            })
        }
}

czy to jest dobre rozwiązanie, czy da sie to lepiej zrobić?

2. W jednym z komponentów mam tabele do której dodaje elementy z poziomu okna modalnego, przy takim dodawaniu również aktualizuje te tabele przez componentWillReceiveProps a nowe dane trzymam w state do momenu kliknięcia "zapisz". I wszystko niby fajnie, ale do momentu gdy wywołam jakąś akcje i wszystkie reducery wpadają na nowo do mapDispatchToProps, wtedy wszystkie dane które trzymałem lokalnie kasują sie ze 'state' i są widoczne tylko te które za 1 razem wpadły z 'mapDispatchToProps'.
3. Jak najlepiej zarządzać tymi danymi? Mam dosyć rozbudowane widoki i nie do końca jestem przekonany że componentWillReceiveProps to dobry sposob na update state. A niektóre rzeczy musze robić lokalnie. jak chociazby dodawanie jakiś elementów do tabeli z modali na ktore dane są łądowane dynamicznie.

Prosze o rady i uwagi:)

NIe rozumem tego kodu po co przepisujesz dane z propsów do stanu...robiąć powielenie i desynchronizacje...

Flux wskaże Ci drogę przy czym Redux jest dosyć specyficzny/trudny może mobx Ci wystarczy

@Szczery: znam MobX ale już troche za późno, bo mam w całym projekcie Reduxa, czy możesz mi powiedzieć jak w najlepszy sposób zarządzać danymi (przykładowo pomijając componentWillReceiveProps), np. gdy wchodze w edycje elementu lub dla przykładów opisnych wyżej. Wszystkie dane trzymam w state containera na wzór(Container i z niego rozdzielam dane przez propsy), czy możesz ocenić czy to dobre podejście, jak zrobić to lepiej, w przypadku gdy często potrzebuje pobierać świeże dane z api? Przykładowy kod poniżej:

export default class AddPrincingMediaSimplified extends Component {

    constructor(props) {
        super(props);

        this.state = {
            _mediaSimplified: this.props.data.mediaSimplifiedElements,
            connectedRealEstateList: this.props.data.connectedRealEstateList
        };


     }

     componentWillReceiveProps(nextProps) {

        if (nextProps.data.mediaSimplifiedElements) {
            this.setState({
                _mediaSimplified: nextProps.data.mediaSimplifiedElements
            })
        }

        if(nextProps.data.customer.data.idx) {
            var newState;

            newState = update(this.state._mediaSimplified, {
                data: {
                    estateBurden:{
                       customer: {
                               $set : nextProps.data.customer.data
                       }
                    }
                }
            });

            this.setState({_mediaSimplified: newState});
        }

    }
     render() {

         return (
             <div className="">

                 <div className="row">
                     <div className="col-md-6 col-xs-12">
                        <GeneralData              
                        mediaSimplified = { this.state._mediaSimplified }
                        />
                     </div>

                 <div className="actionBar col-xs-12">
                     <a onClick={()=>this.savePrincingMediaSimplified()}  className=" btn btn-primary">Zapisz</a>
                     <Link to="/princingmediasimplified" className=" btn btn-danger">Anuluj</Link>
                 </div>
             </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {data: state}
}

function mapDispatchToProps(dispatch) {

    return {
        getCustomersList: (customerType) =>{
            dispatch(getCustomersList(customerType));
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddPrincingMediaSimplified)

Ja w komponencie formularza wyświetlam tylko propsy a pozniej przy submicie formularza, zbieram dane -> robie akcje reduxa i tyle. Stan mam tylko w komponencie App/root

Szczery napisał(a):

Ja w komponencie formularza wyświetlam tylko propsy a pozniej przy submicie formularza, zbieram dane -> robie akcje reduxa i tyle. Stan mam tylko w komponencie App/root

Pytanie czy przy submicie nie lepiej pobierać te dane bezpośrednio ze 'state', Dodatkowo jak mam tabele do której dodaje elementy (lokalnie w state) z tabeli (przy jej załadowaniu leci akcja z reduxa) na oknie modalnym, wtedy stan powraca do poprzedniego, nie wiem jak to obejść

Musisz mieć jedno źródło danych czyli store nawet jeśli dodajesz sobie dynamicznie wiersze to właśnie przez store wtedy nawet jak popażesz modala to stan w store jest aktualny

@Szczery: czy możesz podać jakiś przykład?

Każda operacja nawet dodanie nowej pozycji faktury na froncie idzie jako akcja..oczywiście ona nie ma żadnego odzwierciedlenia w backendzie ale ma wpływ na stan i odpowiedni reducer jest do tego. W ten sposób buduje się model....viewModel

To mi troche rozjaśniłeś teraz:) Czyli do aktualizacji inputów na froncie też zrobie osobnego reducera. Chodź z tego co zauwazyłem @Szczery każdy robi to inaczej, mam na myśli te aktualizacje inputów, selectów itp. Troche roboty żeby dla każdego robić reducer. Teraz nie dziwie sie ze na popularności zyskuje chociażby redux-forms

Nie robue reducerow dla kazdego inputa. Nie robie tez onvalchange jak nie potrzebuje. po prostu zbieram dane z forma jquery.

Sebastiano napisał(a):

To mi troche rozjaśniłeś teraz:) Czyli do aktualizacji inputów na froncie też zrobie osobnego reducera. Chodź z tego co zauwazyłem @Szczery każdy robi to inaczej, mam na myśli te aktualizacje inputów, selectów itp. Troche roboty żeby dla każdego robić reducer. Teraz nie dziwie sie ze na popularności zyskuje chociażby redux-forms

Po co Ci kolejny reducer? Skoro masz w reducerze listę elementów to w nim też dokonaj aktualizacji.