react-redux的使用

react-redux的使用，前面已经介绍了redux的使用(https://www.cnblogs.com/cupid10/p/13629368.html)

redux：

• 它是专门用来创建仓库，你可以叫它为store
• 通过redux库里的createStore方法来创建仓库
• 值得傲娇的是redux并不像vuex那样，必须依赖vue而使用，单独拿出来也可以使用

那么，问题来了？

• react-redux又是做什么的？

• • 首先，从名字上来看，就应该能了解，这是结合react与redux一起来使用的
  • 其次，是重点，它是用来连接react组件和store仓库的桥梁
    为啥要使用react-redux桥梁 将 redux 与 react进行连接？

1. 每个组件如果需要使用redux状态，都需要引入store,store.getState()
2. 当redux状态发生改变的时候，对于react组件不知道，需要通过手动订阅才可以(store.subscribe)
3. actionCreators这些方法都不纯粹，因为不仅创建action还得派发action给reducer(store.dispatch)
   下面要看下它的使用流程

首先安装 npm i redux react-redux --save或者 yarn add react-redux

在入口文件index.js中从react-redux中引入Provider

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

store/index.js文件

import {createStore} from 'redux';
import reducer from './reducer';
const store  = createStore(reducer)
export default store

store/reducer.js文件

let state = {
    list: [
        { id: 1, title: "星期一", isFinished: true },
        { id: 2, title: "星期二", isFinished: false }
    ]
}
const reducer = (prevState = state, action) => {
    let newState = { ...prevState }
    switch (action.type) {
        case "addList":
            newState.list = newState.list.slice()
            newState.list.push({
                id: handleList.getId(newState.list),
                title: action.title
            })
            break;
        case "changeList":
            newState.list = handleList.changeList(newState.list, action.id)
            break;
        case "removeList":
            newState.list = handleList.removeList(newState.list, action.id)
            break;
        default:
            break;
    }
    return newState
}
const handleList = {
    getId(list) {
        list = list.slice()
        if (list.length === 0) return 1
        return list.sort((a, b) => {
            return b.id - a.id
        })[0].id + 1
    },
    changeList(list, id) {
        list = list.slice()
        for (let i = 0; i < list.length; i++) {
            if (list[i].id === id) {
                list[i].isFinished = !list[i].isFinished
            }
        }
        return list
    },
    removeList(list, id) {
        list = list.slice()
        return list.filter((item) => {
            console.log(item)
            if (item.id === id) {
                return false
            }
            return true
        })

    }

}
export default reducer

store/actionCreators.js文件

import store from './index'
const actions = {
    addList(title) {
        let action = {
            type: "addList",
            title
        }
        //redux中用 store.dispatch(action)进行派发，react-redux交给组件自己配发
        return action
    },
    changeList(id) {
        let action = {
            type: "changeList",
            id
        }
        return action
    },
    removeList(id) {
        let action = {
            type: "removeList",
            id
        }
        return action
    },
}
export default actions

TodoInput.js

import React, { Component } from 'react'
import actions from '../store/actionCreators'
import { connect } from 'react-redux'
class TodoInput extends Component {
    handleKey = (e) => {
        if (e.keyCode === 13) {
            this.props.addList(e.target.value)
            e.target.value = ""
        }
    }
    render() {
        return (
            <div>
                <input placeholder="请输入内容" onKeyUp={this.handleKey}></input>
            </div>
        )
    }
}
// 这个方法可以将所有更改redux状态的方法全部挂载到ui组件的props上去
// const mapDispatchToProps = dispatch => {
//     return {
//         addList: function (title) {
//             let action = actions.addList(title)
//             dispatch(action)
//         }
//     }
// }
// 相当于把左右actions的方法全都绑定到ui组件的props，并且自动将其派发给redux
const mapDispatchToProps = actions
export default connect(null, mapDispatchToProps)(TodoInput)

Redux组件

import React, { Component } from 'react'
// import store from '../store'
import actions from '../store/actionCreators'
import TodoInput from './TodoInput'
import {connect} from 'react-redux'
class Redux extends Component {
    // redux需要使用store.subscribe获取state数据的变化
    // constructor() {
    //     super()
    //     this.state = {
    //         list: []
    //     }
    // }
    // setList() {
    //     this.setState({
    //         list: store.getState().list
    //     })
    // }
    // componentDidMount() {
    //     this.setList()
    //     store.subscribe(() => {
    //         this.setList()
    //     })
    // }
    handleCheck = (id) => {
        this.props.changeList(id)
    }
    remove = (id) => {
        this.props.removeList(id)
    }
    render() {
        let { list } = this.props;
        return (
            <div>
                <TodoInput />
                {
                    list.map(item => {
                        return <li key={item.id} style={{textDecoration:item.isFinished ? 'line-through':'none'}}><input type="checkbox" checked={item.isFinished} onChange={this.handleCheck.bind(this, item.id)}  /> {item.title}
                            <button onClick={this.remove.bind(this, item.id)}>删除</button>
                        </li>
                    })
                }
            </div>
        )
    }
}
const mapStateToProps = (state)=>{
        return{
            list:state.list
        }
}
export default connect(mapStateToProps,actions)(Redux)

//const mapDispatchToProps = actions
//export default connect(mapStateToProps,mapDispatchToProps)(Redux)