React实战篇——在React中使用Redux

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
 
// 假设我们有一个简单的Reducer函数
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}
 
// 创建Redux store
const store = createStore(counter);
 
// 假设我们有一个React组件需要使用Redux store
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 store到React组件
const App = React.createClass({
  render() {
    return (
      <Provider store={store}>
        <Counter />
      </Provider>
    );
  }
});
 
export default App;

这个例子展示了如何在一个React组件中使用Redux。首先，我们创建了一个简单的Reducer函数counter来处理状态的更新。然后，我们创建了一个Redux store。接下来，我们定义了一个React组件Counter，并通过React.createClass将它与Redux store连接起来。最后，我们使用<Provider store={store}>将store提供给所有子组件，并在Counter组件中通过this.props访问Redux store中的状态和操作。