Question

在我的本机应用程序中，我使用redux来处理Post对象的状态转换 - 状态由几个子组件改变。 Post对象具有title，name，description等属性，用户可以编辑和保存。

在reducer中我使用React.addons.update返回新的状态对象。

主容器视图有2个自定义子组件（包装在TabBarNavigator中）。

其中一个子组件的TextInputs很少，它正在更新状态。

使用logger中间件和console.log（）我在父视图的render（）（通过this.props.name）中看到了新的状态值，但在子视图中没有。

我试图弄清楚为什么更新的状态不会传播到子容器。任何建议都非常感谢。

我想到在子容器中手动订阅redux商店但感觉不对

我的代码如下：

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>
        );

只应在每个应用程序生命周期内创建一次商店。在render()或renderScene()或类似方法中创建商店永远不会有意义。请查看Redux官方示例，了解商店的创建方式。

另一个问题是，您没有显示更新数据的方式，哪些子组件未更新，何时需要更新，等等。这是很多代码，并且很难提供帮助，因为它不完整，而且大部分都与问题无关。我建议您删除所有不相关的代码，直到您可以使用最小可能的完整示例重现问题。然后，您可以修改您的问题以包含该示例。

状态改变没有进入子容器

2 个答案: