Redux的介绍和基本使用

1.Flux和Redux

1.1 Flux
Flux是一种软件编程的架构思想，强调单项数据流

Flux把应用分为四个部分
View   ：  视图
Action  ： 修改store的唯一方式，描述了从数据从应用程序到store的有效信息负载
Dispatcher ： 触发器，接收action，执行回调函数(修改store)
Store : 用来存放应用状态，一旦store发生变化会触发页面刷新

1.2Redux
有人说redux是flux架构思想的一种实现。

Redux在flux基础上强调三个基本原则
1.单一数据源 ： 整个应用的数据都应该存在一个唯一的store上面
2.State只读 ：不要直接尝试去修改store中的state，如果要修改，需要通过action来完成
3.修改store中的state只能通过纯函数来完成 ：
reducers，描述了应用如何响应actions的变化，根据不同的action去修改state

2.redux的基本使用

//1.安装redux
yarn add redux react-redux

//2.引入createStore
import { createStore } from 'redux'

//3.声明actions ： 描述了数据从应用到store的有效信息负载，是修改store的唯一途径。
//action表示操作数据的一种行为，所以type字段必须要提供；除此之外，action中还可以提供一些额外的信息来表示数据该怎么修改。
//要通过action来修改数据，必须把action提交给dispatch，通过diapatch来调用action从而改变数据
let add = {
  type: "ADD",
  step: 3
}
let minus = {
  type: "MINUS"

//4.创建reducers : 描述了如何响应actions的变化，将actions转换为下一个state。
// reducers是一个纯函数(函数内部的操作对函数外部不会产生任何影响)
// 当我们通过代码dispatch(action)之后，此时就会执行这个reducers函数了，并且把dispatch(action)中的action参数传递到reducers函数
// 注意点：
//  1.我们需要在reducers函数返回一个全新的state，而不是修改入参的state，如果修改了就不是纯函数了
//  2.一定到default中返回旧的state，此时可以保证我们遇到未知的action的时候也有返回值
function counter(state = 0, action) {
  switch (action.type) {
    case "ADD":
      return state + action.step;
    case "MINUS":
      return state - 1;
    default:
      return state;
  }
}

//5.createStore(reducer):创建store来存放应用状态
//createStore的参数1：需要是一个reducer
//createSTore的参数2: 可以设置state的初始状态(可有可无)
/*
store的职责：
  1.维持应用的 state；
  2.提供 getState() 方法获取 state；
  3.提供 dispatch(action) 方法更新 state；
  4.通过 subscribe(listener) 注册监听器;
  5.通过 subscribe(listener) 返回的函数注销监听器。
*/
let store = createStore(counter, 999)
//store订阅更新：当store中的数据发生任何变化的时候都会执行订阅更新指定的回调函数
store.subscribe(() => {
  console.log(store.getState(), "xxxxxxxxxxxxxxxx");
  render();
})

//渲染页面的方法
function render() {
  ReactDOM.render(
    /*把store和add和minus传递给App组件*/
    <App store={store} add={add} minus={minus} />,
    document.getElementById('root')
  )
}
render();
//6.在App中使用store
import React from 'react';

function App(props) {
  const { store, add, minus } = props;
  return (
    <div className="App">
      {/*获取到store中的数据*/}
      <p>当前数量:{store.getState()}</p>

      {/*要触发action，我们需要通过store.dispatch()来触发*/}
      <button onClick={()=>{store.dispatch(add)}}>点我加</button>
      <button onClick={()=>{store.dispatch(minus)}}>点我减</button>
    </div>
  );
}

export default App;

请继续对照下篇文章——《Redux使用的常见问题》