React REDX - 如何將狀態傳遞到組件

Question

我是React和Redux的新手。我試圖創建一個功能，讓您在兩個團隊之間進行選擇（onPress），然後顯示下一個視圖/組件（默認情況下會隱藏）。

我創建：

• index.ios.js - 包含商店
• 下注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的和Provider 。 你可以在這裏找到一切： https://github.com/reactjs/react-redux/blob/master/docs/api.md#api。

至於第二個問題，我認爲最好的方法是使用react-router，默認的oltion是渲染一個沒有視圖的組件，並且onPress會改變會導致其他組件渲染的路由，如果你想隱藏它，再次改變路線。因爲你使用的終極版，你應該使用反應 - 柔兒 - 終極版https://github.com/ReactTraining/react-router/blob/master/README.md

但是： https://github.com/reactjs/react-router-redux/blob/master/README.md

Answer 2

/* Question 1: 
 
use `connect` function as follows to pass the current state to component */ 
 
const mapStateToProps = function(state){ 
 
\t 
 
}; 
 
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 
 
}