react总结之redux

其实一般在项目中,不会使用redux,因为没有自动连接,传递起来就很麻烦!这里还是总结一下redux的使用,方便以后查阅!

1.首先要安装redux

npm install --save redux

2.创建目录结构

1. actions目录说明

1. actiosType.js中,存放我们要用到的type的值

	export default {
    	CART_ADD: 'CART_ADD_BY_CART_LIST',
    	CART_MULIT: 'CART_MULIT_BY_CART_LIST'
	}

2.carts.j存放actions

import actionType from './actionsType'
// 加
export const increment = (id)=>  {
    return {
        type: actionType.CART_ADD,
        payload: {
            id: id
        }
    }  
}
// 减
export const decrement = (id) => {
    return {
        type: actionType.CART_MULIT,
        payload: {
            id:id
        }
    }
}

2.components目录说明

1.CartList目录下存放全部的关于该组件的文件

import React, { Component } from "react";
import {increment, decrement} from '../../actions/cart'
export default class CartList extends Component {
    constructor() {
        super();
        this.state = {
            cartList : []
        }
    }
    // 组件完成挂载的生命周期函数
    componentDidMount() {
     this.initList();
     this.props.store.subscribe(this.initList);
    }

    // 初始化列表
    initList = () => {
        this.setState({
            cartList: this.props.store.getState().cart
         })
    }
  render() {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>id</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
                {this.state.cartList.map(x => {
                   return(
                       <tr key = {x.id}>
                           <td>
                               {x.id}
                           </td>
                           <td>
                               {x.title}
                           </td>
                           <td>
                               {x.price}
                           </td>
                           <td>
                   <button onClick={() => {
                       this.props.store.dispatch(increment(x.id))
                   }}>+</button><span>{x.count}</span><button onClick={() =>this.props.store.dispatch(decrement(x.id))}>-</button>
                           </td>
                       </tr>
                   )
                })}
          </tbody>
        </table>
      </div>
    );
  }
}

3.components目录下的index.js文件用于导出组件

export  {default as CartList} from './CartList'

4.reduers目录下的文件说明
1.cart.js文件写关于CartList组件中数据处理的代码

import actionType from '../actions/actionsType'
// 初始化数据
const initCount = [{
            id: 1,
            title: '苹果',
            price: 100,
            count: 10
        },{
            id: 2,
            title: '香蕉',
            price: 30,
            count: 20
        }];
export default(state = initCount, action) => {
    switch(action.type) {
        // 执行加法
        case actionType.CART_ADD:
            return state.map(x => {
                if (x.id === action.payload.id) {
                    x.count = x.count + 2;
                }
                return x;
            })
        break;
        // 执行减法
        case actionType.CART_MULIT:
            return state.map(x => {
                if (x.id === action.payload.id) {
                    x.count = x.count - 5;
                }
                return x;
            })
            break;
        default: 
        return state;
    }
}

2.reduers目录下的index.js用户合并reduers

import {combineReducers} from 'redux'
import cart from './cart'
export default combineReducers({
    cart
})

5.store.js文件写创建store

import {createStore} from 'redux'
import reducers from './reduers'
export default createStore(reducers);

6.index.js引入store并且将store传到App组件中

import React, {Component} from 'react'
import App from './App'
import {render} from 'react-dom'
import store from './store'
render( 
    <App store={store}> </App>,
    document.getElementById('root')
  )

7.App.js中引入组件CartList,并且将store传到CartList组件中

import React, { Component } from 'react'
import {CartList} from './components'
export default class App extends Component {
    render() {
        return (
            <div>
                <CartList store={this.props.store}></CartList>
            </div>
        )
    }
}

8.CartList目录下的index.js写组件的内容和事件

import React, { Component } from "react";
import {increment, decrement} from '../../actions/cart'
export default class CartList extends Component {
    constructor() {
        super();
        this.state = {
            cartList : []
        }
    }
    // 组件完成挂载的生命周期函数
    componentDidMount() {
     this.initList();
     this.props.store.subscribe(this.initList);
    }

    // 初始化列表
    initList = () => {
        this.setState({
            cartList: this.props.store.getState().cart
         })
    }
  render() {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>id</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
                {this.state.cartList.map(x => {
                   return(
                       <tr key = {x.id}>
                           <td>
                               {x.id}
                           </td>
                           <td>
                               {x.title}
                           </td>
                           <td>
                               {x.price}
                           </td>
                           <td>
                   <button onClick={() => {
                       this.props.store.dispatch(increment(x.id))
                   }}>+</button><span>{x.count}</span><button onClick={() =>this.props.store.dispatch(decrement(x.id))}>-</button>
                           </td>
                       </tr>
                   )
                })}
          </tbody>
        </table>
      </div>
    );
  }
}

以上是一个简单实例的代码

代码的执行逻辑图

从以上可以看出,redux没有自动连接,代码写起来很难受,在实际的项目中,一般是不会使用redux,而是使用比较方便的react-redux!