1

私の反応ネイティブ アプリでは、redux を使用してPostオブジェクトの状態遷移を処理しています。状態は、いくつかの子コンポーネントによって変更されます。Postオブジェクトには 、 などのプロパティがtitleあり、nameユーザーdescriptionはこれらを編集して保存できます。

レデューサーでは、React.addons.update を使用して新しい状態オブジェクトを返します。

メイン コンテナ ビューには、2 つのカスタム子コンポーネントがあります (TabBarNavigator にラップされています)。

子コンポーネントの 1 つに、状態を更新する 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

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

ストアは、アプリケーションの有効期間ごとに 1 回だけ作成する必要があります。render()またはrenderScene()同様のメソッド内で作成することは意味がありません。ストアが通常どのように作成されるかについては、公式の Redux の例を確認してください。

もう 1 つの問題は、データを更新する方法、更新されない子コンポーネント、いつ更新されるかなどを示していないことです。これは大量のコードであり、不完全であり、そのほとんどが問題に関連していないため、解決するのが非常に困難です。最小限の完全な例で問題を再現できるようになるまで、無関係なコードをすべて削除することをお勧めします。次に、質問を修正してその例を含めることができます。

于 2016-03-11T20:59:05.120 に答える
-1

誰かがこの質問につまずいた場合、これが私が解決した方法です。各子コンポーネントで、次のcontextTypesようにオブジェクトを宣言しました

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

子コンポーネントの現在の状態にアクセスする

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