react_redux

Redux

解决React数据管理（状态管理），用于中大型，数据比较庞大，组件之间数据交互多的情况下。如果你不知道是否需要使用Redux，那么你就不需要用它。

• 解决组件的数据通信
• 解决数据和交互较多的应用

store：数据仓库，保存数据
state：对象，数据仓库里的所有数据都放到1个state里
action：动作，触发数据改变的方法
dispatch：将动作触发成方法
reducer：函数，通过获取动作，改变数据，生成一个新的state，从而改变页面

npm i --save redux

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

// 通过动作创建新的state  初始化数据  改变数据
const reducer = function(state={num:0},action){
  console.log(action);
  switch (action.type) {
    case "add":
      state.num++;
      break;
    case "reduce":
      state.num--;
      break;
    default:
      break;
  }
  // 解构为了认为这是一个新的状态，触发更新 新版本现在也可以实现不用解构
  return state
  // return {...state};
}
// 创建数据仓库
const store = createStore(reducer)
console.log(store);

function add(){
  // 通过仓库的方法dispatch 修改数据
  store.dispatch({type:"add",content:{id: 1,msg: "hello"}})
  console.log(store.getState());
}
function reduce(){
  store.dispatch({type:"reduce"})
  console.log(store.getState());
}

// 函数式技术器
const Count = function(props) {
  // 获取数据
  let state = store.getState()
  return (
    <div>
      <h1>计数器是：{state.num}</h1>
      <button onClick={add}>+1</button>
      <button onClick={reduce}>-1</button>
    </div>
  )
}


ReactDOM.render(
  <React.StrictMode>
    <Count />
  </React.StrictMode>,
  document.getElementById('root')
);

// 监听变化 重新渲染内容
store.subscribe(()=>{
  ReactDOM.render(<Count />,document.getElementById('root'));
})

React_redux

安装：npm install react-redux --save

概念：
provider（组件）: 自动将store里的state和组件进行关联
mapStateToProps：这个函数用于将store的state映射到组件里的props
mapDispatchToProps：将store中的dispatch映射到组件的props里，实现了方法的共享
connect方法：将组件和数据（方法）进行连接

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider,connect} from 'react-redux';

// 多个方法 可以用以下 
let actionFnObj = {
  add: function(state, action) {
    state.num++;
    return state
  },
  addNum: function(state, action) {
    state.num = state.num + action.num;
    return state
  }
}
function reducer(state={num:0},action) {
  // 第一次触发是@redux...
  if (action.type.indexOf('redux')===-1) {
    state = actionFnObj[action.type](state,action)
    return {...state}
  } else {
    return state
  }
}


// function reducer(state={num:0},action) {
//   switch(action.type) {
//     case 'add':
//       state.num++;
//       break;
//     default:
//       break;
//   }
//   return {...state}
// }
const store = createStore(reducer)

// 将state映射到props函数
function mapStateToProps(state){
  return {
    value: state.num
  }
}
// 将修改state数据的方法映射到props，默认传入store里的dispatch方法
function mapDispatchToProps(dispatch) {
  return {
    onAddClick:()=>{dispatch({type:"add"})},
    onAddClick5:()=>{dispatch({type:"addNum",num:5})}
  }
}

class Counter extends React.Component {
  render() {
    console.log(this.props);
    // 计数 通过store的state传给props，直接通过props就可以将state的数据获取
    const value = this.props.value
    // 等同于vuex的mapMutation mapState
    return (
      <div>
        <h1>计数：{value}</h1>
        <button onClick={this.props.onAddClick}>+1</button>
        <button onClick={this.props.onAddClick5}>+5</button>
      </div>
    )
  }
}

// 将上面两个方法 映射到组件上形成新的组件
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

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