react-redux简单例子

redux的作用

react 本身是通过props传递属性的，层级嵌套太深的话，传递属性就需要一层层向下传递，回调也需要一层层的回调。
redux 的作用就是实现跨级传递属性方法和回调
react-redux 是连接react && redux的插件

简单例子

实现数字增加和减少

app.js

//app.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import Action from './Action'
import store from './Reducers'

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

Reducers.js

//Reducers.js
import {createStore} from "redux";

let reducers = function(state=1, action){
  switch (action.type) {
    case 'ADD':
      return state + 1;
      break;
    case 'DEC':
      return state - 1;
      break;
    default:
      return state;
  }
};

export default createStore(reducers);

Action.js

//Action.js
import {connect} from 'react-redux'
class Action extends React.Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div>
        <h1>current number: {this.props.state}</h1>
        <button onClick={this.props.dec}>dec</button>
        <button onClick={this.props.add}>add</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    state:state
  }
}
function mapDispatchToProps(dispatch) {
  return {
    add:function(e){
      const action = {
        type: 'ADD',
      };
      dispatch(action);
    },
    dec:function(){
      const action = {
        type: 'DEC'
      };
      dispatch(action);
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Action);

修改对象不能直接修改state需要

Object.assign({}, state, {keyword:action.value,message:action.message});

import {createStore} from 'redux';
import $ from "jquery";

let reducers = function (state = {
    keyword: '',
    message: '',
    list: [],
    type: 1,
    totalPage: 0,
    pageSize: 20,
    currentPage: 1,
    songId: '',
    page: 1
}, action) {
    switch (action.type) {
        case 'message':
            state.message = action.value;
            break;
        case 'changeKeyword':
            return Object.assign({}, state, {keyword:action.value,message:action.message});
            break;
        case 'search':
            $.ajax({
                type: "GET",
                url: "/cx/index.php",
                async: false,
                data: {
                    m: 'SearchAction',
                    f: 'selectOfKeywords',
                    keyword: state.keyword,
                    page: state.page,
                    pageSize: state.pageSize

                },
                success: (response) => {
                    if (response.code === 0 && response.data.length > 0) {
                        state.list = response.date;
                        state.currentPage = state.page;
                        state.totalPage = Math.ceil(response.count / this.state.pageSize);

                    } else if (response.code !== 0) {

                        state.message = response.message;
                    }
                }
            });
            break;
    }
    return state;
};

export default createStore(reducers);