如何通过参数调用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>