React-7- react-redux

react-redux

下载

 npm install react-redux

使用

 1.创建store文件夹
 2.新建index.js文件,引入redux,创建仓库,导入reducer.js
  新建reducer.js文件,创建纯函数并导出

store/index.js

	import {createStore,combineReducers} from 'redux'
	import data from './reducer'
	
	export default createStore(combineReducers({data}))

store/reducer.js

	export default function data(state,action){
	    return state;
	}

 3.在入口文件index.js中引入react-redux和store文件夹
  结构赋值获取Provider,包裹所有父级,store属性绑定store仓库

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')
);

 4.在哪个组件中需要使用redux中的数据,就在哪个组件中调用
  结构赋值获取connect,connect(state的处理函数)
  connect处理完成后返回一个函数,这个函数的参数为调用的组件
  数据传入props中,包括dispatch用来修改数据的方法

import React, { Fragment } from 'react';
import {connect} from 'react-redux'

function Inner(props){
    console.log(props)
    let {name,age,dispatch} = props
    return (
        <Fragment>
            <p>name:{name}</p>
            <p>age:{age}</p>
            <button onClick={()=>{
                dispatch({
                    type:'edit_name',
                    name:"xxx"
                })
            }}>修改</button>
        </Fragment>
    )
}

/*
	state的处理函数(state,props)=>{
		return 要传给组件的数据
	}           
*/

export default connect((state,props)=>{
    return state.data
})(Inner)

hooks

 1.useSelector

 2.useDispatch

 3.useStore

store/index.js
	import {createStore,combineReducers,applyMiddleware} from 'redux'
	import data from './reducer'
	import thunk from 'redux-thunk';
	
	//export default createStore(combineReducers({data}))
	export default createStore(combineReducers({data}),applyMiddleware(thunk))
	
store/reducer.js
	export default function data(state={
	    name:"微信",
	    age:10
	},action){
	    switch(action.type){
	        case 'edit_name':
	            return {
	                ...state,
	                name:action.name
	            }
	    }
	    return state;
	}
组件中
import React, { Fragment } from 'react';
import {useDispatch,useSelector,useStore,connect} from 'react-redux'

function Inner(props){
	//	useSelector()接收数据
    //  参数：回调函数
    let {name,age} = useSelector((state)=>{
        return state.data;
    })
	//	useDispatch()用于修改数据
    let dispatch = useDispatch()
	//	useStore()相当于store
    console.log(useStore())
    return (
        <Fragment>
            <p>name:{name}</p>
            <p>age:{age}</p>
            <button onClick={()=>{
            	//	该方法中无法传入一个函数
            	//	redux-chunk可以帮助我们在dispatch中可以传入函数
                dispatch({
                    type:'edit_name',
                    name:"xxx"
                })
                //	使用redux-chunk后
                dispatch((dispatch,getstate)=>{
                    setTimeout(() => {
                        dispatch({
                            type:'edit_name',
                            name:"xxx"
                        })
                    }, 1000);
                })
            }}>修改</button>
        </Fragment>
    )
}

export default Inner;