如何通過參數調用redux動作並從reducer訪問？

Question

如何從我的組件的渲染函數調用setCounter動作值參數？

你如何訪問reducer中的動作參數？

// File: app/actions/counterActions.js 
export function setCounter(value) { 
    return { 
    type: types.SETCOUNTER, 
    value 
    }; 
} 
export function increment() { 
    return { 
    type: types.INCREMENT 
    }; 
} 
export function decrement() { 
    return { 
    type: types.DECREMENT 
    }; 
} 

如何檢索reducer中的動作參數？

// File: app/reducers/counter.js 
export default function counter(state = initialState, action = {}) { 
    switch (action.type) { 
    case types.INCREMENT: 
     return { 
     ...state, 
     count: state.count + 1 
     }; 
    case types.DECREMENT: 
     return { 
     ...state, 
     count: state.count - 1 
     }; 
    case types.SETCOUNTER: 
     return { 
     ...state, 
     count: value /* How do I access an action argument ?? */ 
     }; 
    default: 
     return state; 
    } 
} 

如何將參數傳遞給setCounter操作？

File: app/components/counter.js 
export default class Counter extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { counter, increment, decrement, setCounter } = this.props; 

    return (
     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
     <Text>Count:{counter}</Text> 
     <TouchableOpacity onPress={setCounter(99)} style={styles.button}> 
      <Text>Reset to 99</Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={increment} style={styles.button}> 
      <Text>up</Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={decrement} style={styles.button}> 
      <Text>down</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

我使用這個反例反應學習母語終極版： https://github.com/alinz/example-react-native-redux

這個程序有兩個按鈕;遞增和遞減計數器上的調用操作以及計數器值重新呈現。

我想添加第三個按鈕來將setCounter設置爲任意值。

由於提前，

-Ed 的JavaScript，反應本地的，終極版新手

我不明白的JavaScript語法進行調用setCounter（值），在我看來組件渲染功能？

{setCounter（99）}不起作用？

render（）{ const {counter，increment，decrement，setCounter} = this.props;

return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
    <Text>Count:{counter}</Text> 
    <TouchableOpacity onPress={setCounter(99)} style={styles.button}> 
     <Text>Reset to 99</Text> 
    </TouchableOpacity> 
    <TouchableOpacity onPress={increment} style={styles.button}> 
     <Text>up</Text> 
    </TouchableOpacity> 
    <TouchableOpacity onPress={decrement} style={styles.button}> 
     <Text>down</Text> 
    </TouchableOpacity> 
    </View> 
); 

}

Answer 1

在你的行動的創建者要添加value行動目標：

// File: app/actions/counterActions.js 
export function setCounter(value) { 
    return { 
    type: types.SETCOUNTER, 
    value // it will add key `value` with argument value. 
    }; 
} 

所以，你可以通過這個按鍵減速訪問此值，如：

case types.SETCOUNTER: 
    return { 
    ...state, 
    count: action.value 
    }; 

Answer 2

試試這個......你的所有參數都將生活在操作的對象。

case types.SETCOUNTER: 
    return { 
    ...state, 
    {count: action.value} 
}; 

或者，你可以這樣做：

case types.SETCOUNTER: 
    return { 
    ...state.count, 
    ...action.value 
}; 

Answer 3

我的主要挑戰之一是不理解JavaScript。

這解決了這個問題，叫：

<TouchableOpacity onPress={() => setCounter(99)} style={styles.button}> 
     <Text>Reset to 99</Text> 
    </TouchableOpacity>