redux的初识见解

1.引入模块redux和react-redux

npm install redux --save
npm install react-redux --save

2.应用到全局的index.js中

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {createStore,applyMiddleware} from 'redux';
import {Provider} from "react-redux"
import reducer from "./roudexs"
import thunk from "redux-thunk"

const store = createStore(reducer,applyMiddleware(thunk))
//把创建的仓库放到第三方仓库中让所有组件多能拿到通过store传递数据
ReactDOM.render(
<Provider store={store}>
	<App />
</Provider>
, document.getElementById('root'));

3.通过redux模块导出createStore和applyMiddleware

import {createStore,applyMiddleware} from 'redux';

4.通过react-redux模块导出Provider

import {Provider} from "react-redux"

5.创建第三方仓库Provider

Provider是第三方仓库，通过store属性向内部组件传递数据

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

6.通过connect连接Provider第三方仓库

在需要使用或者要改变该仓库数据的地方使用

 //使用connect连接Provider拿到第三方仓库
import {connect} from "react-redux"




//这个state获取的就是仓库中combineReducers的所有值
//mapStateToProps返回的必须是一个对象
const mapStateToProps = ( state )=>{
	let {header,body} = state;
    return {header,body}
} ;
// let mapStateToProps = (start)=>{
// 	reutrn {"abc":start}
// }


//使用connect方法把Header组件连接到
export default connect(mapStateToProps)( Header )

7.创建仓库

使用createSrore创建本地仓库第一个参数是reducer，第二个参数设置加载异步数据

import reducer from "./roudexs"
const store = createStore(reducer,applyMiddleware(thunk))

8.导出reducer对象

//把所有的要改变的数据结合一起；
import {combineReducers} from "redux"

import header from "./header.js"
import body from "./body.js"
//这个就是仓库中存放的值;
//通过调用函数做进一步的处理；
export default combineReducers({
	header,
	body
})

9.对放到仓库中的数据做进一步处理

const Add_Num = "加只鸡";
const  romove_Num = "少只鸡";
export default function body(state=0,action){
    switch(action.type){//传进来你到底是叫了一只鸡还是少了一只鸡，再来改变状态
        case Add_Num:
            return state + 1
        case romove_Num:
            return state - 1
        default:
            return 0

    }
}

10.在需要的组件里使用this.props下的dispatch方法改变数据

handelClick4 =()=>{
		let a = 4
		//通过传入状态type进行相应的操作
		this.props.dispatch({
			a,
			type:"add"
		})
	}

11.如果使用异步加载数据得话

handelClick5=()=>{
		
		//通过传入状态type进行相应的操作
		this.props.dispatch(dispatch=>{
			setTimeout(()=>{
				dispatch({type:"remove"})
			},1000)
		})
	}