详细整理一波redux资料

详细整理一波redux资料

• 前言：之前和一些小伙伴讨论的时候发现由于技术栈偏向和工作年限的原因，有的小伙伴可能对redux的理解和使用不是很熟练。因此整理了一波个人觉得比较好理解的redux资料。附demo代码，需要的小伙伴可以自取哈~

• 获取实例代码链接：
  https://pan.baidu.com/s/1KAUcEr3GiKj-1644LZQSoA.
  提取码： mbx8

• 多说一点~~
  整理这个demo还是花了一些心血的。主要是想按照初学者的学习思路整理，以便于大家更好的理解。内容包含从redux最基础的使用，react中结合redux用法，react-redux的用法。如果有需要的小伙伴希望能帮到你们

正文

一些基本概念

Redux是什么?
专注于状态管理的库
Redux专注于状态管理，和react解耦
单一状态,单向数据流.

核心概念: store, state, action, reducer

redux 使用方法

1. 首先通过reducer新建store，随时通过store.getState获取状态
2. 需要状态变更,store.dispatch（action）来修改状态
3. Reducer函数接受state和action，返回新的state，可以用store.subscribe监听每次修改

一、redux 最基本的用法和理解：（redux_demo01）

理解：
我们可以把redux使用想象成一个仓库管理的过程。
在使用前，我们要新建一个仓库(store)来保管数据状态(state)，
当我们需要改变数据状态(state)时，
需要去告诉仓库管理员(dispatch)要进行什么样的操作(action)如何改变
利用subscribe监听每次的更改

代码：

import { createStore } from 'redux'

// 1、新建store
// 通过reducer建立
// 根据老的state和action生成新的state
const store = createStore( ( state=10 , action ) => {
    switch (action.type) {
      case "请加一":
        return state + 1
      case "请减一":
        return state - 1 
      default:
        return 10
    }
})

// 订阅函数
function listener() {
  const current = store.getState()
  console.log( current )
}

// 订阅，state每次更改都会触发 subscribe 里面的方法。
store.subscribe( listener )

// 提交状态改变申请 
// store.dispatch 派发事件传递action
store.dispatch( {type: "请加一"} )
store.dispatch( {type: "请减一"} )
store.dispatch( {type: "请减一"} )
store.dispatch( {type: "请减一"} )
store.dispatch( {type: "请加一"} )

二、redux 和 react 结合使用（redux_demo02）

1. 把store.dispatch方法传递给组件，内部可以调用修改状态
2. subscribe订阅render函数，每次修改都重新渲染
3. 新建文件xxx.redux.js (index.redux.js) 单独管理 Redux相关代码块

代码：
app.js

import React from 'react';
import { addPlease } from "./index.redux";
import { subPlease } from "./index.redux";

export default class App extends React.Component{
  render() {
    const store = this.props.store
    const num = store.getState()
    console.log( "state value:" + num )
    return(
      <div>
        <h1> 现在的state值是：{num} </h1>
        <button onClick={ () => store.dispatch( addPlease() ) } > state加一 </button>
        <button onClick={ () => store.dispatch( subPlease() ) } > state减一 </button>
      </div>
    )
  }
}

index.js

import React from 'react';
import ReactDom from 'react-dom';
import App from './app';
import { createStore } from 'redux';
import { counter } from './index.redux';

const store = createStore( counter )
function render() {
  ReactDom.render( <App store={store} />, document.getElementById('root') )
}
render();
store.subscribe( render )

index.redux.js

/**
 * redux 和 react 结合使用
 * 
 * 把store.dispatch方法传递给组件，内部可以调用修改状态
 * Subscribe订阅render函数，每次修改都重新渲染
 * 新建文件index.redux.js 单独管理 Redux相关代码块
*/
const ADD_Please = "请加一";
const SUB_Please = "请减一";
// reducer
export function counter( state , action ) {
  switch (action.type) {
    case "请加一":
      return state + 1
    case "请减一":
      return state - 1 
    default:
      return 10
  }
}
// action creator 专门创建action
export function addPlease() {
  return { type: ADD_Please }
}
export function subPlease() {
  return { type: SUB_Please }
}

三、redux 中处理异步（redux_demo03）

Redux默认只处理同步，异步任务需要借用中间件来处理（以redux-thunk为例）

1. Npm install redux-thunk --save
2. 使用applyMiddleware开启thunk中间件
3. Action可以返回函数，使用dispatch提交action

使用方式：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const store = createStore( counter, applyMiddleware(thunk) )
......

四、react-redux（redux_demo04）

react-redux是什么？
React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据

一些关键api：

1. React-redux提供Provider和connect两个接口来做链接
2. Provider组件在应用最外层，传入store即可，只用一次
3. Connect负责从外部获取组件需要的参数

使用方式：

1. Provider
   Provider是react-redux专门链接数据的组件
   使用Provider后， App里其他的参数store，addPlease等等，都不用写了。只需要在最外层的 Provider 上传入 store属性

import { Provider } from 'react-redux';
ReactDom.render( 
  <Provider store={store} >
    <App />
  </Provider>,
  document.getElementById('root') 
)

2. connect
   connect react-redux的另一个api，用于连接数据的
   使用connect处理后可以直接从props中获取传递的参数和方法

使用方式：

import { connect } from 'react-redux';

......

const mapStatetoProps = (state) => {
  return { num: state }
}
const actionCreators = { addPlease, subPlease, addPleaseAsync, subPleaseAsync }

App = connect(mapStatetoProps, actionCreators)(App)

......