react 使用 react-redux

在React中使用React-Redux，你需要做以下几步：

1. 安装react-redux：

npm install react-redux

2. 创建Redux store：

import { createStore } from 'redux';
 
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}
 
const store = createStore(counter);

3. 使用<Provider>组件包裹你的应用，在根组件：

import { Provider } from 'react-redux';
 
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 (
      <div>
        <p>Value: {this.props.value}</p>
        <button onClick={this.props.increment}>Increment</button>
        <button onClick={this.props.decrement}>Decrement</button>
      </div>
    );
  }
}
 
// 连接Redux
const mapStateToProps = (state) => ({
  value: state
});
 
const mapDispatchToProps = {
  increment: () => ({ type: 'INCREMENT' }),
  decrement: () => ({ type: 'DECREMENT' })
};
 
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

这样，你就可以在你的应用中使用React-Redux了，Counter组件可以从Redux store中获取状态，并且可以通过dispatching相应的actions来更新状态。