React/ReactNative 状态管理: redux 如何使用

Redux 是 JavaScript 状态容器，提供可预测的状态管理。在 React 和 React Native 应用中使用 Redux 主要包括以下步骤：

1. 安装 Redux 相关库：

npm install redux react-redux

2. 创建 Redux store 并配置状态：

import { createStore } from 'redux';
 
// 定义一个简单的reducer
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}
 
// 创建store
const store = createStore(counter);

3. 使用 react-redux 提供的 <Provider> 组件将 store 传递到应用的最顶层：

import { Provider } from 'react-redux';
 
// 在根组件外围包裹 Provider
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4. 使用 connect 高阶组件将组件连接到 Redux store：

import { connect } from 'react-redux';
 
class Counter extends React.Component {
  render() {
    return (
      <View>
        <Text>{`Current counter: ${this.props.counter}`}</Text>
        <Button onPress={this.props.increment} title="Increment" />
        <Button onPress={this.props.decrement} title="Decrement" />
      </View>
    );
  }
}
 
// 连接 Redux state 和 dispatch 到组件的 props
const mapStateToProps = (state) => ({
  counter: state,
});
 
const mapDispatchToProps = {
  increment: () => ({ type: 'INCREMENT' }),
  decrement: () => ({ type: 'DECREMENT' }),
};
 
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

以上代码展示了如何在一个简单的 React Native 应用中使用 Redux。这个应用有一个计数器，并且使用 Redux 来管理状态。通过 mapStateToProps，你可以将 store 中的状态映射到组件的 props，而 mapDispatchToProps 允许你将 action creators 映射到 props，以便可以直接从组件内部触发状态变化。