react-（redux, react-redux）

• reducer 对数据进行操作

创建counter.js

// reducer是个纯函数， 改变store数据的
const counter = (state = 0, action) => {
  switch(action.type) {
    case 'increment':
      return state+1
    case 'decrement':
      return state - 1
    default:
      return state
  }
}
export default counter

• index.js 引用
• 参考 ```javascript import {createStore } from ‘redux’ import counter from ‘./reducer/counter’ import App from ‘./App’;

// 创建仓库 const storeCounter = createStore(counter) // 监听数据变化 storeCounter.subscribe(() => { render() //监听变化页面就重新渲染， // console.log(‘store’, storeCounter.getState()) // 获取state })

const render = () => { ReactDOM.render( storeCounter.dispatch({type:’increment’})} onDecrement={() => storeCounter.dispatch({type:’decrement’})} val={storeCounter.getState()} />, document.getElementById(‘root’) ); } render()

---
<a name="mCnpp"></a>
### react-redux
- 安装 cnpm i --save-dev react-redux
<a name="NjM3q"></a>
#### 主文件 index.js 中做关联
```javascript
// 包裹用的
import {Provider} from 'react-redux'
import counter from './reducer/counter'
import {createStore } from 'redux'
// 创建仓库
const storeCounter = createStore(counter)
ReactDOM.render(
  <Provider store={storeCounter}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

• App.js 中

import React from 'react';
// 把 该组件与 redux 链接起来
import {connect} from 'react-redux'
class App extends React.Component {
  render() {
    console.log(this.props)
    const {increment, decrement} = this.props
    return (
      <div className='container'>
        <h1 className='jumbotron-heading text-center'>{this.props.counter}</h1>
        <p className='text-center'>
          <button onClick={() => increment()} className='btn-primary btn'>增加</button>
          <button onClick={() => decrement()} className='btn-default btn ml-3'>减少</button>
        </p>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    counter: state
  }
}
// action 触发注入
const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => {dispatch(increment())}, //内部方法执行
    decrement: () => {dispatch(decrement())}
  }
}
// 高阶组件  , 把状态和props 关联起来   , state 和action 顺序不能改
export default connect(mapStateToProps, mapDispatchToProps)(App)

优化 bindActionCreators

import React from 'react';
// 把 该组件与 redux 链接起来
import {connect} from 'react-redux'
// 引入
import * as counterActions from './actions/counter'
import {bindActionCreators} from 'redux'
class App extends React.Component {
  render() {
    // console.log(this.props)
    return (
      <div className='container'>
        <h1 className='jumbotron-heading text-center'>{this.props.counter}</h1>
        <p className='text-center'>
          // 使用方式
          <button onClick={() => this.props.counterActions.increment()} className='btn-primary btn'>增加</button>
          <button onClick={() => this.props.counterActions.decrement()} className='btn-default btn ml-3'>减少</button>
        </p>
      </div>
    )
  }
}
// this.props.counter 使用
const mapStateToProps = (state) => {
  return {
    counter: state
  }
}
// action 触发注入
// const mapDispatchToProps = (dispatch) => {
//   return {
//     increment: () => {dispatch(increment())},
//     decrement: () => {dispatch(decrement())}
//   }
// }
// this.props.counteActions 使用
const mapDispatchToProps = (dispatch) => {
  return {
    counterActions: bindActionCreators(counterActions, dispatch)
  }
}
// 高阶组件  state和action 书序不能颠倒
export default connect(mapStateToProps, mapDispatchToProps)(App)

• 优化 数据归类

创建 actions/counter.js

import * as constants from '../constants'
export const increment = (num) => {
  return {
    type: constants.INCREMENT,
    num
  }
}
export const decrement = (num) => {
  return {
    type: constants.DECREMENT,
    num
  }
}

常量文件 constants/index.js

// 常量 保存
export const INCREMENT = "INCREMENT"
export const DECREMENT = "DECREMENT"

reducer/counter.js

import * as constants from '../constants'
// reducer是个纯函数， 改变store数据的
// 数据在action 中
const counter = (state = 0, action) => {
  switch(action.type) {
    case constants.INCREMENT:
      return state + action.num
    case constants.DECREMENT:
      return state - action.num
    default:
      return state
  }
}
export default counter

• 数据调用可以传参

<button onClick={() => this.props.counterActions.increment(10)} className='btn-primary btn'>增加</button>
<button onClick={() => this.props.counterActions.decrement(5)} className='btn-default btn ml-3'>减少</button>

reducer 合并

创建 reducer/index.js

import {combineReducers} from 'redux'
import counter from './counter'
const rootReducer = combineReducers({
  counter
})
export default rootReducer // 是个对象，组件调用的时候用对象

const mapStateToProps = (state) => {
  return {
    counter: state.counter ////////这里 对象形式
  }
}

新增user 操作

// actions/user.js
import {ADD_USER} from '../constants'
export function addUser(name) {
  return {
    type: ADD_USER,
    name
  }
}
// constants/index.js
// user
export const ADD_USER = "ADD_USER"
// reducer/user.js
import {ADD_USER} from '../constants'
// reducer是个纯函数， 改变store数据的
// 数据在action 中
// 改变对象
const counter = (state = {name:'测不准'}, action) => {
  switch(action.type) {
    case ADD_USER:
      state.name = action.name
      // 对象要创建个新对象
      let newState = Object.assign({},state,action)
      return newState
    default:
      return state
  }
}
export default counter
使用
const mapStateToProps = (state) => {
  console.log(123, state)
  return {
    counter: state.counter,
    user: state.user
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    counterActions: bindActionCreators(counterActions, dispatch),
    userActions: bindActionCreators(userActions, dispatch)
  }
}