Question

我是React和Redux的新手。我正在尝试创建一个功能，让您在两个团队（onPress）之间进行选择，然后显示下一个视图/组件（默认情况下会隐藏）。

我创建了：

index.ios.js - 包含商店
bet-view.js - 实际组件
pickPartyActions - 我定义了一些动作
pickPartyReducers - 我指定状态如何变化

reducer正确返回新状态。我想使用该新状态及其属性来执行下一步操作。

首先 - 如何使用/将新状态（及其属性）从reducer传递到另一个视图或组件？

<View>
  <Text>Set Bet Amount</Text>
</View>

第二 - 如何隐藏该视图并仅在onPress操作后显示/显示它？

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  NavigatorIOS
} from 'react-native';

import { createStore } from 'redux'
import BetView from './app/components/bet-view'
import reducers from './app/reducers/'

const store = createStore(reducers)
export default store

store.subscribe(() => {
  console.log(store.getState())
})

class testProject extends Component {
  render() {
    return (
      <NavigatorIOS 
        initialRoute={{
          component: BetView,
          title: 'Bet view',
          index: 0
        }}
      />
    );
  }
}

AppRegistry.registerComponent('testProject', () => testProject);

投注视图

import React from 'react'
import {
    View,
    Text,
    TouchableHighlight,
} from 'react-native'

import store from '../../index.ios'

import pickPartyActions from '../actions/pickPartyActions'
import pickPartyReducer from '../reducers/pickPartyReducer'

const BetView = ({navigator, parties}) =>
<View>
    <Text>{parties[0]} vs {parties[1]}</Text>
    <View>
        <TouchableHighlight onPress={() => store.dispatch(pickPartyActions(partyType='left', name=parties[0], status='active', left='active', right='inactive'))}>
            <Text>Left</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={() => store.dispatch(pickPartyActions(partyType='right', name=parties[1], status='active', left='inactive', right='active'))}>
            <Text>Right</Text>
        </TouchableHighlight>
    </View>

    <View> 
        <Text>Set Bet Amount</Text>
    </View>
</View>

export default BetView

操作

const pickPartyActions = (partyType, name, status, left, right) => {
    switch (partyType) {
        case 'left': {
            return {
                type: 'PICK_LEFT_PARTY',
                name,
                status,
                left,
                right,
            }
        }
        case 'right': {
            return {
                type: 'PICK_RIGHT_PARTY',
                name,
                status,
                left,
                right,
            }
        }
    }
}

export default pickPartyActions

减速

import pickPartyActions from '../actions/pickPartyActions'

const initialState = {
    name: '',
    status: 'inactive',
    left: 'inactive',
    right: 'inactive',
}

const pickPartyReducer = (state=initialState, action) => {
    switch (action.type) {
        case 'PICK_LEFT_PARTY': {
            return {
                ...state,
                name: action.name,
                status: action.status,
                left: action.left,
                right: action.right,
            }
        }
        case 'PICK_RIGHT_PARTY': {
            return {
                ...state,
                name: action.name,
                status: action.status,
                left: action.left,
                right: action.right,
            }
        }
        default:
            return state;
    }
}

export default pickPartyReducer

Answer 1

要回答您的第一个问题，如果我理解正确，您正在谈论将信息从redux状态传递到您的组件，以实现最好的方式来阅读connet和react-reactx的提供者。你可以在这里找到所有东西： https://github.com/reactjs/react-redux/blob/master/docs/api.md#api

关于第二个问题，我认为最好的方法是使用react-router，默认的方法是渲染没有视图的组件，onPress改变路由，这将导致你的其他组件被渲染，如果要隐藏它，请再次更改路径。您可以在此处阅读更多内容：https://github.com/ReactTraining/react-router/blob/master/README.md

但是，因为你使用redux，你应该使用react-rouer-redux： https://github.com/reactjs/react-router-redux/blob/master/README.md

Answer 2

＆＃13;

/* Question 1:
use `connect` function as follows to pass the current state to component */
const mapStateToProps = function(state){
	
};
connect(mapStateToProps)(View); /* components that needs the state and access it from props */
/*
Question 2:
This needs to managed with a different props/state eg:
*/

{props.hasPressedButton?
  <View> 
        <Text>Set Bet Amount</Text>
  </View> : null 
}

＆＃13;

React redux - 如何将状态传递给组件

2 个答案: