React共享计数器增量

npm install redux react-redux

// counter.js
const initialState = {
  count: 0
};

const INCREMENT = 'INCREMENT';

export const increment = () => ({
  type: INCREMENT
});

export const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1
      };
    default:
      return state;
  }
};

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { counterReducer } from './counter';

const store = createStore(counterReducer);

const App = () => (
  <Provider store={store}>
    {/* Your app components */}
  </Provider>
);

export default App;

// Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { increment } from './counter';

const Counter = ({ count, increment }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
  </div>
);

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = {
  increment
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);