Redux,React-Redux简单示例

Redux,React-Redux简单示例

Counter示例

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import App from "./components/App/App";
import {Provider} from "react-redux";
import store from "./store";

ReactDOM.render(
  <React.StrictMode>
       <Provider store={store}>
           <App/>
       </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

//store/index.js
import { createStore } from 'redux'
import reducer from './reducers/index'
const store = createStore(reducer)
export default store

//reducers
export default (state = 1, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }
}

//app.jsx
import React,{Component} from 'react';
import './App.css';
import Counter from "../Counter/Counter";
import store from "../../store";
import { connect } from 'react-redux'
class App extends Component{
  constructor(props) {
    super()
  }
  onIncrement=() =>{
    console.log("INCREMENT")
    store.dispatch({ type: 'INCREMENT' })
    console.log(store.getState())
  }
  onDecrement=() =>{
    console.log("DECREMENT")
    store.dispatch({ type: 'DECREMENT' })
    console.log(store.getState())
  }
  render() {
    return <Counter value={store.getState()}
                       onIncrement={this.onIncrement}
                       onDecrement={this.onDecrement}/>

  }
}
export default connect(state => state)(App)

//counter.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Counter extends Component {
    constructor(props) {
        super();
    }

    incrementIfOdd=() =>{
        if (this.props.value % 2 !== 0) {
            this.props.onIncrement()
        }
    }

    incrementAsync=() =>{
        setTimeout(this.props.onIncrement, 1000)
    }

    render() {
        const { value, onIncrement, onDecrement } = this.props
        return (
            <p>
                Clicked: {value} times
                {' '}
                <button onClick={onIncrement}>
                    +
                </button>
                {' '}
                <button onClick={onDecrement}>
                    -
                </button>
                {' '}
                <button onClick={this.incrementIfOdd}>
                    Increment if odd
                </button>
                {' '}
                <button onClick={this.incrementAsync}>
                    Increment async
                </button>
            </p>
        )
    }
}

Counter.propTypes = {
    value: PropTypes.number.isRequired,
    onIncrement: PropTypes.func.isRequired,
    onDecrement: PropTypes.func.isRequired
}

export default Counter