1

在我的 react native 应用程序中，我使用 redux 来处理Post对象的状态转换——状态由几个子组件更改。该Post对象具有 , 等属性，title用户可以对其进行编辑和保存。namedescription

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

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

其中一个子组件几乎没有 TextInputs 正在更新状态。

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

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

我正考虑在子容器中手动订阅 redux 存储，但感觉不对

我的代码如下所示：

主视图

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}/>
    }
}

配置存储：

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

2 回答 2

-1

如果有人偶然发现这个问题，这就是我解决它的方法。在每个子组件中，我声明了一个contextTypes像这样的对象

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

访问子组件中的当前状态

let {store} = this.context;
store.getState();
于 2016-03-10T02:21:31.410 回答
-1

我不太了解 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 示例以了解商店通常是如何创建的。

另一个问题是你没有显示你是如何更新数据的，哪个子组件没有更新，你希望它什么时候更新，等等。这是很多代码，而且很难提供帮助，因为它不完整，而且大部分与问题无关。我建议您删除所有不相关的代码，直到您可以用尽可能少的完整示例重现问题。然后您可以修改您的问题以包含该示例。

于 2016-03-11T20:59:05.120 回答