redux

安装包：

cnpm i redux react-redux -S

下面的代码协助理解一下redux内部是怎么进行操作的

reducer = (state,action) =>{
        state.params = 2;
        return state;
    }
    function createStore (callBack){
        let state = {
            params:1,
        }
        let arr = []
        dispatch =(action)=>{
            state = callBack(state,action);
            arr.forEach(element => {
                element()
            });
        }
        getState =()=> state;
        subscrice = (params) => {
            arr.push(params)
        };
        return {dispatch,getState,subscrice}
    }
    var store = createStore(reducer);
    store.subscrice(()=>{
        console.log(store.getState())
    })
    store.dispatch({})

正文

index.js中引入

import {createStore} from 'redux'    
import { Provider } from 'react-redux';     //和react关联

import {createStore} from 'redux'
import { Provider } from 'react-redux'; 
import rootReducer from './store';
// 传入reducer方法
const store = createStore(rootReducer)
ReactDOM.render(
    <React.StrictMode>
        {/* 关联redux */}
        <Provider store = {store}>  
              <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

新建文件 store  

const initState = {
    list:[1,2,3,4]
}
const rootReducer = (state = initState,action)=>{
    if(action.type === "DELET"){
        let list = state.list.filter(content=>{
            return content !== action.id
        })
        return {
            ...state,
            list
        }
    }
    return state
}
export default rootReducer;

home.js文件中： 

import React ,{Component} from 'react';
import {connect} from 'react-redux'
class home extends Component {
    handleClick=(id)=>{
        this.props.deleteEvery(id)
    }
	render(){
        let storeList = this.props.listParams.map(content=>{
            return (
                <div key={content} onClick={()=>this.handleClick(content)}>{content}</div>
            )
        })
		return(
			<div>
               <span>{storeList}</span>
            </div>
		)
	}
}
const mapStateToProps = (state) =>{
    return {
        listParams:state.list
    }
}
const mapDispatchToProps = (dispatch) =>{
    return {
        deleteEvery:(id)=> dispatch({type:"DELET",id})
    }
}
// 高阶组件
// 利用content 和 定义的  两个函数 将redux中的值放入了props中   
export default connect(mapStateToProps,mapDispatchToProps)(home)

总结一下。自己以后长时间不用了。返回来看看还能回忆起来

1、redux需要两个包

react-redux 和 redux

2、在入口文件，使用react-redux中的Provider将组件包裹起来，然后createStore初始化. 它接收一个函数rootReducer 。用来处理自己想要处理的操作

import {createStore} from 'redux'
import { Provider } from 'react-redux'; 
import rootReducer from './rootReducer';
// 传入reducer方法
const store = createStore(rootReducer)
ReactDOM.render(
  <React.StrictMode>
    {/* 关联redux */}
    <Provider store = {store}>  
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

3、新建文件rootReducer  用来书写处理数据的函数  state(相当于一个数据存储中心)需要一个默认值，action常规书写规范：操作类型、操作值{type:"操作类型",id:"值"}

const initState = {
    list:[1,2,3,4]
}
const rootReducer = (state = initState,action)=>{
    if(action.type === "DELET"){
        let list = state.list.filter(content=>{
            return content !== action.id
        })
        return {
            ...state,
            list
        }
    }
    return state
}
export default rootReducer;

4、利用react-redux中的connect打通react和redux。然后就可以通过this.props.名称来进行操作了

        connect(state的操作、方法的操作)(组件)

import React ,{Component} from 'react';
import {connect} from 'react-redux'
class home extends Component {
    handleClick=(id)=>{
        this.props.deleteEvery(id)
    }
	render(){
        let storeList = this.props.listParams.map(content=>{
            return (
                <div key={content} onClick={()=>this.handleClick(content)}>{content}</div>
            )
        })
		return(
			<div>
               <span>{storeList}</span>
            </div>
		)
	}
}
const mapStateToProps = (state) =>{
    return {
        listParams:state.list
    }
}
const mapDispatchToProps = (dispatch) =>{
    return {
        deleteEvery:(id)=> dispatch({type:"DELET",id})
    }
}
// 高阶组件
// 利用content 和 定义的  两个函数 将redux中的值放入了props中   
export default connect(mapStateToProps,mapDispatchToProps)(home)