React中的状态管理---Redux（下）

yarn add react-redux

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

connect方法的返回值是一个函数，这个函数接收到UI组件之后会返回一个容器组件，容器内部已经嵌套了UI组件
Provider组件会利用context上下文将自己属性中store传递给自己的子级组件，而容器组件会取得context上面的store相关的api
我们可以在connect函数中传入mapStateToProps/mapDispatchToProps参数来掌控容器组件给UI组件传递属性的过程
*mapStateToProps的作用*：
   将store中的state传递到UI组件的属性上
   值为一个函数，接收到的就是store中的state
   返回值是什么，UI组件的属性上就有什么
   并且，因为容器组件中已经做好了store.subscribe的处理，所以一旦store中的状态变化，容器组件就马上能得知，就会重新给UI组件传入新的数据
    *问题*： 坑  ？ 我们的store中的数据在更新， 但是里面的容器组件中的 props 不更新
    分析： 先从组件上着手，查看我们书写的代码， 发现代码没有问题的， 这个时候我们就要去查看数据来源， 而数据来源来自于  reducer , 然后输出一下数据， 发现数据渲染了三次 ， 有两次是一个组件在创建的时候， 数据从无到有， 还有一次是容器组件产生的 ， 后面我们发送我们的new_state一直在重复初始化， 
    解决方案： 
        let newState = {...previousState}
mapDispatchToProps的作用：
   可以将能使用到dispatch的一些方法传递到UI组件上
   值为一个函数，接收到的就是store中的dispatch
   返回上面，UI组件的属性上就有什么
   这个时候actionCreator就变得很纯粹，只需要创建action，dispatch action的动作可以放到mapDispatchToProps的方法中，也就说，在mapDispatchToProps给UI组件传递的函数中将actionCreator创造好的action给dispatch走
但是这样的写法优点不舒服，因为actionCreator里有一个方法，还需要在mapDispatchToProps里再写一个方法
所以可以利用redux中的bindActionCreators将actionCreator中的方法直接放入到UI组件中并且将其返回的action给直接dispatch走
因为在组件中既要用到store中的状态，也要用到actionCreator的方法，导致这个组件引入了很多东西，其实我们可以将这些逻辑封装取出

import React,{ Component,Fragment } from 'react'
import actionCreators from '../../store/todos/actionCreators'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
const Item = (props) => {
    return (
        <li>{ props.item.text }</li>
    )
}
class TodoContent extends Component {
    renderItem = () => {
        return this.props.todos.todos.map( (item,index)=>{
           return <Item item={ item } key={ item.id }></Item>
        })
    }
    addTodos = (e) => {
        let keyCode = e.keyCode
        let value = e.target.value
        if ( keyCode === 13 ){
            this.props.addTodos(value)
        }
    }
    render () {
        console.log('render')
        return (
            <Fragment>
                 <input onKeyUp={ this.addTodos } type="text"></input>
                <ul>
                    { this.renderItem() }
                </ul>
            </Fragment>
        )
    }
}
// const mapStateToProps = ( state ) => {//第一种connect方法
//     // return state.todos
//     return {
//         todos : state.todos
//     }
// }
// const mapDispatchToProps = ( dispatch ) => {
//     console.log(dispatch)
//     return bindActionCreators ( actionCreators,dispatch )
// }
// export default connect(mapStateToProps,mapDispatchToProps)(TodoContent)
export default connect(//第二种connect方法
    state => state,
    dispatch => bindActionCreators(actionCreators,dispatch)
)(TodoContent)

import * as type from './type'
const actionCreators = {
    addTodos( value ){
        let action = {
            type : type.ADD_TODOS,
            payload : value
        }
        return action
    }
}
export default actionCreators

import { createStore,applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
const store = new createStore( reducer,applyMiddleware(thunk) )
export default store 

import * as type from './type'
const actionCreators = {
    getData(){
        return dispatch =>{
            fetch('/data.json')
            .then(res=>res.json())
            .then(data=>{
                console.log('datad',data)
               let action = {
                   type : type.GET_DATA,
                   payload : data
               }
               dispatch( action )
            })
            .catch(error=>console.log(error)) 
        }   
    },
    addTodos(value){
        let action = {
            type : type.ADD_TODOS,
            payload : value
        }
        return action
    }
}
export default actionCreators

import * as type from './type'
import state from './state'
const reducer = (previousState = state,action)=>{
    let newState = {
        ...previousState
    }
    switch(action.type){
        case type.GET_DATA:
            newState.todos=action.payload
            break;
        case type.ADD_TODOS:
            newState.todos.push({
                id : newState.todos.length + 1,
                text : action.payload
            })
            break;
        default:
            break;
    }
    console.log(newState)
    return newState
}
export default reducer

import React,{ Component,Fragment } from 'react'
// import { connect } from 'react-redux'
// import  { bindActionCreators } from 'redux'
// import actionCreators from '../../store/todos/actionCreators'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actionCreators from '../../store/todos/actionCreators'
class TodoInput extends Component {
    addTodos = (e)=>{
        let keyCode = e.keyCode
        let value = e.target.value
        if (keyCode === 13){
            this.props.addTodos(value)
        }
    }
    getData=()=>{
        this.props.getData()
    }
    render() {
        return (
            <Fragment>
                <button onClick={ this.getData }>获取数据</button>
                <input onKeyUp={ this.addTodos } type="text" placeholder="请输入大粑粑"></input>
            </Fragment>
        )
    }
}
export default connect(
    state => state,//必须添加
    dispatch => bindActionCreators( actionCreators,dispatch )
)(TodoInput)

import React,{ Component,Fragment } from 'react'
import { connect } from 'react-redux'
const Item = (props)=>{
    return (<li>{ props.item.text }</li>)
}
class TodoContent extends Component {
    renderItem = () => {
        return this.props.todos.todos.map( (item,index)=>{
            return <Item item= { item } key ={ item.id }></Item>
        })
    }
    render () {
        return (
            <Fragment>
                <ul>
                    { this.renderItem() }
                </ul>
            </Fragment>
        )
    }
}
// export default TodoContent
export default connect(
    state => state
)(TodoContent)