Изменение состояния, не попадающее в дочерний контейнер

Question

В моем адаптивном приложении я использую сокращение для обработки перехода состояния объекта Post - состояние изменяется на пару дочерних компонентов. Объект Post имеет такие свойства, как title, name, description, которые пользователь может редактировать и сохранять.

В редукторе Im, использующем React.addons.update, возвращается новый объект состояния.

Основной вид контейнера имеет 2 пользовательских дочерних компонента (завернутый в TabBarNavigator).

У одного из дочернего компонента есть несколько текстовых входов, которые обновляют состояние.

Использование промежуточного программного обеспечения logger и console.log() Я вижу новое значение состояния в представлении родительского представления() (через this.props.name), но не в дочернем представлении.

Я пытаюсь понять, почему обновленное состояние не распространяется на дочерний контейнер. Любое предложение очень ценится.

Im в точке, где Im мышление subscribeing к Redux магазина вручную в детском контейнере, но он чувствует себя неправильно

мой код выглядит следующим образом:

• MainView
• Reducer
• configure store etc

MainView

const React = require('react-native'); 
const { 
    Component, 
    } = React; 

const styles = require('./../Styles'); 
const MenuView = require('./MenuView'); 
import Drawer from 'react-native-drawer'; 
import TabBarNavigator from 'react-native-tabbar-navigator'; 
import BackButton from '../components/BackButton'; 

import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import * as PostActions from '../actions/Actions'; 


import {Details} from './Article/Details'; 
import {ArticleSecondary} from './Article/Secondary'; 
var update = require('react-addons-update'); 

import configureStore from '../store/configureStore'; 

class ArticleMainView extends Component { 

    constructor(props){ 
     super(props); 

     //var store = configureStore(props.route.post); 
     this.state = { 
     }; 

    } 

    componentDidMount(){ 

    } 

    savePost() { 
     console.log(this.props.post.data); 
     this.props.navigator.pop(); 
    } 

    render(){ 
     console.log("ArticleMainView: render(): " + this.props.name); 

     return(
      <TabBarNavigator 
       ref="navComponent" 
       navTintColor='#346293' 
       navBarTintColor='#94c1e8' 
       tabTintColor='#101820' 
       tabBarTintColor='#4090db' 
       onChange={(index)=>console.log(`selected index ${index}`)}> 
       <TabBarNavigator.Item title='ARTICLE' defaultTab> 
        <Details ref="articleDetail" 
          backButtonEvent={() => { 
               this.props.navigator.pop(); 
             }} 
          saveButtonEvent={() => { 
               this.savePost(); 
          }} 
          {...this.props} 
        /> 
       </TabBarNavigator.Item> 
       <TabBarNavigator.Item title='Secondary'> 
        <ArticleSecondary ref="articleSecondary" 
           {...this.props} 
           backButtonEvent={() => { 
               this.props.navigator.pop(); 
             }} 
           saveButtonEvent={() => { 
               this.savePost(); 
          }} 
        /> 
       </TabBarNavigator.Item> 
      </TabBarNavigator> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     post: state, 
     text: state.data.text, 
     name: state.data.name, 
     description: state.data.description 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators(PostActions, dispatch); 
} 

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

Разбавление:

import {Constants} from '../api/Constants'; 
var update = require('react-addons-update'); 

export default function postReducer(state, action) { 
    switch(action.type) { 
     case Constants.SET_POST_TEXT: 
      if(state.data.text){ 
       return update(state, { 
        data: { $merge: {text: action.text }} 
       }); 
      }else{ 
       return update(state, { 
        data: { $merge: {text: action.text }} 
       }); 
      } 

      break; 
     case Constants.SET_POST_NAME: 
      return update(state, { 
       data: { name: { $set: action.text }} 
      }); 
      return newO; 
      break; 
     case Constants.SET_POST_DESCRIPTION: 
      return update(state, { 
       data: { description: { $set: action.text }} 
      }); 
      break; 
     default: 
      return state; 
    } 
} 

визуализации сцены приложения:

renderScene(route, navigator) { 
    switch (route.id) { 
     case "ArticleMainView": 
      let store = configureStore(route.post); 
      delete route.post; // TODO: not sure if I should remove this 

      return (
       <Provider store={store}> 
        <ArticleMainView navigator={navigator} {...route}/> 
       </Provider> 
      ); 
     default: 
      return <LandingView navigator={navigator} route={route}/> 
    } 
} 

configureStore:

import { createStore,applyMiddleware,compose } from 'redux' 
import postReducer from '../reducers/SocialPostReducer'; 
import createLogger from 'redux-logger'; 

const logger = createLogger(); 

export default function configureStore(initialState){ 
    return createStore(
     postReducer, 
     initialState, 
     compose(applyMiddleware(logger)) 
    ); 
} 

Answer 1

Если кто натыкается на этот вопрос, это как Я решил это. В каждой из дочерних компонентов я объявил contextTypes объект как так

ChildComponentView.contextTypes = { 
    store: React.PropTypes.object 
} 

для доступа к текущему состоянию в компоненте детского

let {store} = this.context; 
store.getState(); 

Answer 2

Я не знаю, React Native хорошо, но то, что отбросило меня является то, что вы фактически создавая store на каждый визуализации:

case "ArticleMainView": 
     let store = configureStore(route.post); 
     delete route.post; // TODO: not sure if I should remove this 

     return (
      <Provider store={store}> 
       <ArticleMainView navigator={navigator} {...route}/> 
      </Provider> 
     ); 

магазин должен быть только CREA один раз за время жизни приложения. Не имеет смысла создавать его внутри render() или renderScene() или аналогичные методы. Пожалуйста, ознакомьтесь с официальными примерами Redux, чтобы узнать, как обычно создается магазин.

Другая проблема заключается в том, что вы не показываете, как вы обновляете данные, какой дочерний компонент не обновляется, когда вы ожидаете его обновления, и так далее. Это очень много кода, и очень сложно помочь, потому что он неполный, и большая часть его не имеет отношения к проблеме. Я предлагаю вам удалить все нерелевантные коды, пока вы не сможете воспроизвести проблему с минимальным возможным полным примером . Затем вы можете изменить свой вопрос, включив этот пример.