react-redux学习

cnpm install redux react-redux redux-thunk -S
cnpm install redux-logger redux-devtools-extension -D

action.js

import {
    ADD,
    INCERMENT
} from "./Base"
const add = function (num=5) {
    return {
        type: ADD,
        num
    }
}
const incerment = function (num=3) {
    return {
        type: INCERMENT,
        num
    }
}
export {
    add,
    incerment
}

reducer.js

import {
    ADD,
    INCERMENT
} from './Base'
const init = {
    num: 10
}
const reducer = function (state = init, action = {}) {

    switch (action.type) {
        case ADD:
            return {
                ...state,
                num: state.num + action.num
            }
            case INCERMENT:
       //单独返回state.num+1 操作的话页面会数值会显示undefined。
                return {
                    ...state,
                    num: state.num - action.num
                }
                default:
                    return {
                        ...state
                    }
    }
}
export {
    reducer
}

base.js

const ADD = "add"
const INCERMENT = "incerment"
export {
    ADD,
    INCERMENT
}

store.js

import logger from 'redux-logger'
import thunk from 'redux-thunk' // 注册中间件，支持异步请求
import {
    composeWithDevTools
} from 'redux-devtools-extension'
import {
    reducer
} from './reducer'
import {
    createStore,
    applyMiddleware,
} from 'redux'
// const reducers = combineReducers(reducer);
const store = createStore(reducer, composeWithDevTools(applyMiddleware(logger, thunk)));
export {
    store
}

index.js

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

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js

import React, { Component, Fragment } from 'react'
import { connect } from "react-redux"
import { add, incerment } from "./reducer/Action"
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  componentDidMount() {
    console.log(this.props);

  }
  add = function () {
    this.props.add()
  }
  render() {
    return (
      <Fragment>
        <div className="App">
          大家好
         <div> {this.props.count}</div>
          <div>
            <button onClick={this.add.bind(this)}>增加</button><br />
            <button onClick={() => this.props.incerment()}>减少</button>
          </div>
        </div>
      </Fragment>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    count: state.num
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    incerment: () => { dispatch(incerment(10)) },
    add: () => { dispatch(add(21)) }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)