redux的使用及优化

一、什么是`redux`

1、redux的主要作用
- 主要作用是方便组件之间的通讯
  
  不使用redux的时候组件之间只能通过传值的方式进行通讯,如果组件多了，嵌套多了，通讯方式就只能一层一层的传递,比较麻烦
- 一个项目中只有一个store,在根组件中使用上下文的方式传递到整个项目的根组件下
2、主要的流程
- components表示我们的react组件,在组件中发出一个命令到action中
- action使用dispatch返回一个带type类型的对象到reducers
- reducer中使用switch来修改state的值
- 在组件中订阅仓库的数据

二、依赖环境的安装

1、使用npx创建一个react项目
```
npx create-react-app [项目名称]
```

2、安装依赖包

npm install redux
# 针对于react和redux的连接工具
npm install react-redux

3、基本分目录结构

对于小型项目来说，可以不分store文件结构,但是对于大项目来说是必须要分的。下面我们先介绍如何单个文件的使用,然后在使用分目录的方式。先创建好目录结构

扫描二维码关注公众号，回复： 12303656 查看本文章
```
// 项目的src目录下创建一个store的文件夹
➜  store git:(master) ✗ tree             
.
├── action-types.js
├── action.js
├── index.js
└── reduce.js
```

三、基本的使用

1、在store/action-types.js的文件中定义两个常量

export const ADD = 'ADD'
export const MINUS = 'MINUS'

2、在store/reducer.js的文件中定义一个reducer的函数

import * as types from './action-types'

// 定义初始化的值
let initialState = {
      
      number: 0}

function reducer (state = initialState , action) {
      
      
  switch (action.type) {
      
      
    case types.ADD:
      // return {number: state.number + (action.payload || 1)}
      return {
      
      number: state.number + 1}
    case types.MINUS:
      return {
      
      number: state.number - 1}
    default:
      return state
  }
}

export default reducer;

3、在store/actions.js中定义操作的方法

import * as types from './action-types'

export default {
      
      
  add(payload) {
      
      
    // 如果传递了参数过来就会到payload
    console.log('点击了', payload)
    return {
      
       type: types.ADD, payload}
  },
  minus(payload) {
      
      
    return {
      
      type: types.MINUS,payload}
  }
}

4、在根组件中使用react-redux将redux与react连接起来

import {
      
       Provider } from 'react-redux'
import store from './store'

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

5、组件中使用connect

import React, {
      
       Component } from 'react'
import {
      
       connect } from 'react-redux'
import action from './../store/actions'

class Count1 extends Component {
      
      
  render () {
      
      
    console.log(this.props)
    return (
      <div>
        <button onClick={
      
      this.props.minus}>
          -
        </button>
        {
      
      this.props.number}
        <button onClick={
      
      this.props.add}>
          +
        </button>
      </div>
    )
  }
}

const mapStateToProps = state => {
      
      
  console.log(state)
  return state
}

export default connect(mapStateToProps, action)(Count1)

四、多组开发中使用`store`来开发

1、将store文件夹分目录结构

➜  store git:(master) ✗ tree
.
├── action-types.js
├── actions
│   ├── count1.js # 组件count1的action
│   └── count2.js
├── index.js
└── reduces
    ├── count1.js # 组件count1的reduces
    ├── count2.js
    └── index.js

2 directories, 7 files

2、actions和reduces里面的文件和之前的一样的

3、reduces/index.js的文件是将多个reducer合并生一个

import {
      
       combineReducers } from 'redux'
import count1 from './count1'
import count2 from './count2'

const reducers = {
      
      
  count1,
  count2
}

const rootReducer = combineReducers(reducers);
export default rootReducer;

4、store/index.js使用被合并后的reducer

import {
      
       createStore } from 'redux'
import reducer from './reduces'

export default createStore(reducer)

五、使用`immutable`来修改状态

1、下载安装依赖包npm地址

2、在初始化状态的时候使用immutable库中的fromJS包装下

...
import {
      
       fromJS } from 'immutable'
// 定义初始化的值
let initialState = fromJS({
      
       number: 10 });
...

3、在reducer函数中使用set和get来设置新的值

import * as types from './../action-types'
import {
      
       fromJS } from 'immutable'

// 定义初始化的值
let initialState = fromJS({
      
      
  number: 5
})

function reducer (state = initialState , action) {
      
      
  switch (action.type) {
      
      
    case types.ADD:
      // 如果initialState有多个熟悉的时候,也仅仅会修改number这个属性，不用担心会修改别的属性
      return state.set('number', state.get('number') + 1)
    // return { number: state.number + 1 }
    case types.MINUS:
      return state.set('number', state.get('number') - 1)
    // return { number: state.number - 1 }
    default:
      return state
  }
}

export default reducer

4、在组件mapStateToProps中使用

const mapStateToProps = state => {
      
      
  console.log(state, state.count1.get('number'))
  return {
      
       number: state.count1.get('number')}
}

六、使用`redux-immutabale`

1、为什么要使用redux-immutable

前面我们介绍了count1里面的状态使用了immutable，是immutable对象了,但是我们在组件的使用过程中是state.count1.get('number')前面的state.count1是普通对象。使用redux-immutable就可以将state也变成一个immutable对象
2、安装依赖包
```
npm install redux-immutable
```

3、在reducer中使用

// import { combineReducers } from 'redux'
// 将原来从redux中的combineReducers改为redux-immutable中的
import {
      
       combineReducers } from 'redux-immutable'
import count1 from './count1'
// import count2 from './count2'

const reducers = {
      
      
  count1,
// count2
}

const rootReducer = combineReducers(reducers)
export default rootReducer

4、现在state也是immutable对象了,我们要修改组件

...
const mapStateToProps = state => {
      
      
  // 获取使用 state.getIn(['count1', 'number']);
  return {
      
       number: state.get('count1').get('number')}
}

export default connect(mapStateToProps, action)(Count1)

redux的使用及优化

一、什么是redux

二、依赖环境的安装

三、基本的使用

四、多组开发中使用store来开发

五、使用immutable来修改状态

六、使用redux-immutabale

猜你喜欢

一、什么是`redux`

四、多组开发中使用`store`来开发

五、使用`immutable`来修改状态

六、使用`redux-immutabale`