React之redux和react-redux

1、redux的使用：

（1）基本概念和 API：

1.1 Store

• Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
• Redux 提供createStore这个函数，用来生成 Store。
• createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

import { createStore } from 'redux';
const store = createStore(reducer);

1.2 State

• state就是store里面存储的数据，store里面可以拥有多个state，Redux规定一个state对应一个View,只要state相同，view就是一样的，反过来也是一样的，可以通过store.getState( )获取。

import {createStore} from 'redux'
const store=createStore(fn);
const state=store.getState()

1.3 Action

state的改变会导致View的变化，但是在redux中不能直接操作state也就是说不能使用this.setState来操作，用户只能接触到View。在Redux中提供了一个对象来告诉Store需要改变state。Action是一个对象其中type属性是必须的，表示Action的名称，其他的可以根据需求自由设置。

const action={
  type:'ADD_TODO',
  payload:'redux原理'
}

在上面代码中，Action的名称是ADD_TODO，携带的数据是字符串‘redux原理’，Action描述当前发生的事情，这是改变state的唯一的方式

1.4 store.dispatch( )

store.dispatch( )是view发出Action的唯一办法。

store.dispatch({
  type:'ADD_TODO',
  payload:'redux原理'
})

store.dispatch接收一个Action作为参数，将它发送给store通知store来改变state。

1.5 Reducer

• Store收到Action以后，必须给出一个新的state，这样view才会发生变化。这种state的计算过程就叫做Reducer。
  Reducer是一个纯函数，他接收Action和当前state作为参数，返回一个新的state。
• 注意：Reducer必须是一个纯函数，也就是说函数返回的结果必须由参数state和action决定，而且不产生任何副作用也不能修改state和action对象

const reducer =(state,action)=>{
  switch(action.type){
    case ADD_TODO:
        return newstate;
    default return state
  }
}

（2）redux 案例

src/index.js代码：

/**
 * src/index.js
 */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {createStore} from 'redux'
import reducer from './reducers/counter'

// 创建仓库，参数是reducer
const store = createStore(reducer)

const renderDom = () => {
  ReactDOM.render(
    <React.StrictMode>
      {/* 父组件传值给子组件，value就是获取状态中的值，onIncrement和onDecrement是一个执行dispatch的函数 */}
      <App
        value = {store.getState()}
        onIncrement={() => {store.dispatch({type: "INCREMENT"})}}
        onDecrement={() => {store.dispatch({type: "DECREMENT"})}}
      />
    </React.StrictMode>,
    document.getElementById('root')
  );
}
renderDom();

// 监听数据变化，只要state变化，就会重新执行renderDom函数
store.subscribe(renderDom)

src/reducers/counter.js 代码

/**
 * src/reducers/counter.js
 */
import * as constants from './../constants'

const counter = (state=0, action) => {
  switch(action.type) {
    case constants.INCREMENT:
      return state+1;
    case constants.DECREMENT:
      return state-1
    default:
      return state;
  }
}

export default counter

src/App.js 代码

/**
 * src/App.js
 */
import React from 'react';

export default class App extends React.Component{
  render() {
    console.log (this.props)
    let {value, onIncrement, onDecrement} = this.props
    return (
      <div className="App">
        <p>{value}</p>
        <button onClick={onIncrement}>加1</button>
        <button onClick={onDecrement}>减1</button>
      </div>
    )
  }
}

2、react-redux

• 由于上面使用redux时，每次修改state都要重新调用render函数。于是引入了react-redux。

 src/index.js 代码

/**
 * src/index.js
 */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {createStore} from 'redux'
import reducer from './reducers/counter'
// 引入react-redux中的Provider，是一个组件，只要包含在这个组件内的页面都可以使用store
import { Provider } from "react-redux"

// 创建仓库，参数是reducer
const store = createStore(reducer)

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

src/App.js 代码

/**
 * src/App.js
 */
import React from 'react';
import {connect} from 'react-redux'
import {increment, decrement} from './actions/counter'

class App extends React.Component{
  render() {
    console.log (this.props)
    let {counter, increment, decrement} = this.props
    return (
      <div className="App">
        <p>{counter}</p>
        <button onClick={()=>increment(5)}>加</button>
        <button onClick={()=>decrement(10)}>减</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    counter:state
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    increment: (num) => {dispatch(increment(num))},
    decrement: (num) => {dispatch(decrement(num))}
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

其中，新增了actions/counter.js文件

import * as constants from './../constants'

export function increment (num) {
  console.log(num)
  return {
    type: constants.INCREMENT,
    num
  }
}

export function decrement (num) {
  return {
    type: constants.DECREMENT,
    num
  }
}

如果 actions/counter.js 中很多方法，调用起来就很复杂，可以整合一下。

src/App.js 代码

/**
 * src/App.js
 */
import React from 'react';
import {connect} from 'react-redux'
// import {increment, decrement} from './actions/counter'
import * as counterActions from './actions/counter'
import {bindActionCreators} from 'redux'

class App extends React.Component{
  render() {
    console.log (this.props)
    let {counter, counterActions} = this.props
    return (
      <div className="App">
        <p>{counter}</p>
        <button onClick={()=>counterActions.increment(5)}>加</button>
        <button onClick={()=>counterActions.decrement(10)}>减</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    counter:state
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    counterActions: bindActionCreators(counterActions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

 

现在是只有一个counter模块，如果又有user模块的数据，那就要使用到combineReducers了

reducers文件夹里新建user.js文件，创建一个user的reducers

import { FETCH_USER_SUCCESS } from "../constants"

const initialState = {
  user:{}
}

const user = ( state = initialState,action ) => {
  switch(action.type){
      case FETCH_USER_SUCCESS:
          return {
              user: action.user
          };
      default:
          return state;
  }
}

export default user

reducers文件夹里新建index.js文件,将两个reducers整个起来。

import { combineReducers } from "redux"
import counter from "./counter"
import user from "./user"

const rootReducer = combineReducers({
    counter,
    user
})

export default rootReducer

index.js引入

import rootReducer from "./reducers"

const store = createStore(rootReducer)

在actions文件夹里新建user.js

import { FETCH_USER_SUCCESS } from "../constants"

export const get_user = (user) => {
    return {
        type: FETCH_USER_SUCCESS,
        user
    }
};

新建user页面

import React from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as userActions from './../actions/user'

class User extends React.Component{
  render () {
    let {user, userActions} = this.props
    console.log(user, userActions)
    return(
      <div>
        {
          Object.keys(user.user).length === 0 ? <p>User</p> : <p>{user.user}</p>
        }
          <button onClick={ () => { userActions.get_user('gfz') } }>getUser</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    user: state.user
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    userActions: bindActionCreators(userActions,dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(User)