2017-08-25 1 views
1

Ich erstelle eine Anwendung, die dynamisch reagierende Komponenten von json-Definitionen darstellt. Einige der Komponenten müssen mit einem Datenkontext gerendert werden. Diese Komponenten müssen dann externe Daten abrufen. Ich hatte zuvor eine naive Lösung, um diese Komponenten mit einer DataComponent zu umhüllen, die während des Mount eine Anfrage auslöst und dann den Status setzt. Dieser Ansatz funktioniert.Komponente wird nicht neu übergeben, wenn Store manuell an Komponenten übergeben wird (react-redux)

componentWillMount =() => 
    provider 
    .get() 
    .then(data => this.setState({data})) 

Jetzt habe ich versucht, mit einer Lösung zu kommen mit redux, so dass alle Datenschemata einen Reduktions haben, und jede Komponente muss nicht seine eigenen Daten verwalten (die aus der gleichen Quelle stammen könnten als andere Komponenten). Der Speicher wird ordnungsgemäß initialisiert, und ich kann sehen, dass der Speicherstatus ordnungsgemäß aktualisiert wird, wenn eine Aktion ausgelöst wird (ich verwende redux devtools zum Validieren, kein Zustand ist mutiert). Die Komponente wird jedoch nicht mit den neuen Daten aktualisiert. Die Funktion render wird nach dem ersten Aufruf nicht erneut aufgerufen.

Hier ist ein ähnlicher Code zu dem, was ich kam mit:

import React from 'react' 
import {connect} from 'react-redux' 
import PropTypes from 'prop-types' 

// Component: React.Component 
// store: redux-store 
// schema: String 
export default function connectedComponent(Component, store, schema) { 

    class DataComponent extends React.Component { 

     static propTypes = { 
      // eslint-disable-next-line react/forbid-prop-types 
      data: PropTypes.any 
     } 

     static defaultProps = { 
      data: null 
     } 

     render =() => { 
      if (this.props.data) { 
       return this.renderComponent(Component, this.props.data) 
      } 
      return (<span>empty</span>) 
     } 

    } 

    renderComponent = (Component, data) => ... 

    // eslint-disable-next-line react/no-multi-comp,react/display-name 
    return (props) => { 
     const ConnectedData = connect(mapStateToProps(schema))(DataComponent) 
     return (
      <ConnectedData {...props} 
          store={store}/>) 
    } 
} 

const mapStateToProps = (schema) => (state) => ({ 
    data: state[schema][schema] 
}) 

Hier ist der Code für den Speicher

import {createStore} from 'redux' 
import {combineReducers} from 'redux' 
import reduce from 'lodash/reduce' 
import has from 'lodash/has' 

export default (schemas) => createStore(
    createReducers(schemas), 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
) 

const createReducers = (schemas) => combineReducers(reduce(schemas, accumulateReducers, {})) 

const accumulateReducers = (reducers, schema) => ({...reducers, [schema.id]: createReducer(schema)}) 

const createReducer = (schema) => { 
    return (state = getDefault(schema), {type, response}) => { 
     switch (type) { 
      case `${schema.id}_GET_SUCCESS`: 
       return {...state, [schema.id]: response} 
      default: 
       return state 
     } 
    } 
} 

const getDefault = (schema) => ({ 
    [schema.id]: getDefaultValue(schema) 
}) 

const getDefaultValue = (schema) => { 
    if (has(schema, 'defaultValue')) { 
     return schema.defaultValue 
    } 

    switch (schema.type) { 
     case 'array': 
      return [] 
     case 'object': 
      return {} 
     default: 
      return null 
    } 
} 

Innerhalb der Anwendung, es gibt auch eine andere redux Store den Renderer Zustand zu verwalten.

Edit 1: GitHub Repo Hinzufügen von 2 das Problem https://github.com/clydeespeno/redux-custom-store

bearbeiten Demo: reagieren-Redux-Version war 5.0.2, festgestellt, dass es einen Fehler zu Abonnement gegen benutzerdefinierte bereitgestellt Shop an war, die war bereits mindestens fixiert auf 5.0.6

Antwort

0

reagieren-Redux-Version war 5.0.2 gefunden, dass ein Fehler dort Abonnement gegen benutzerdefinierte bereitgestellt Shop an war, die bereits zumindest auf 5.0.6

Aktualisierung wurde behoben Reaktiv-Reduk- tion auf 5.0.6 Das Problem wurde behoben. Der Fehler wird hier beschrieben https://github.com/reactjs/react-redux/pull/589

Verwandte Themen