redux实现非父子关系的组件之间的传参(基础实现,不使用Provider)

真正开发项目的时候会经常遇到非父子关系的组件需要相互传递参数,这里实现一个基础版本的Redux,实际开发中,不使用Provider是极少的,这里仅仅作为一个复习的基础知识作为记载

1.安装Redux

	npm install redux

2.项目中配置redux

• 1.根目录下新建store文件夹,然后在该文件夹下新建index.js文件和reducer.js文件
    1.1.index.js文件的配置

			import { createStore } from 'redux'  // 引入createStore方法
		    import reducer from './reducer' //引入reducer
		    const store = createStore(reducer)          // 创建数据存储仓库
		    export default store                 //暴露出去 		

    1.2 reducer.js文件的配置

           //默认数据
			const defaultState = {
			    list: [
			        '我是第一条数据',
			        '我是第二条数据'
			    ]
			} 
			export default (state = defaultState, action) => {  //就是一个方法函数 state指的是原始仓库里的状态   action值的是action新传递过来的值
			    if (action.type === "toChild2") {
			        let inputValue = JSON.parse(JSON.stringify(state));
			        inputValue.value = action.value
			        return inputValue;
			    }
			    return state
			}

3.创建子组件----Child1

import React, { Fragment } from 'react'
import store from './../store'
class Child1 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            inputValue: ''
        }
    }
    // 将输入框的值放进store中
    send() {
        const action = {
            type: 'toChild2',
            value: this.state.inputValue
        }
        store.dispatch(action);
    }
    // 获取input输入框的值
    inputValue(event){
        this.state.inputValue = event.target.value;
    }
    render() {
        return(
            <Fragment>
                <div>
                    <div>
                        <h3>我是child1</h3>
                        <input onChange = {this.inputValue.bind(this)}/><button onClick = {this.send.bind(this)}>发送</button>
                    </div>
                </div>
            </Fragment>
        )
    }
}
export default Child1

4.创建另一个子组件----Child2

import React, { Component, Fragment } from 'react'
import store from './../store'
class Child2 extends React.Component{
    constructor(props){
        super(props)
        this.state = store.getState()
        this.storeChange = this.storeChange.bind(this)// 改变this的指向
        store.subscribe(this.storeChange)  //订阅
    }
    // 获取store中的值
    storeChange() {
        this.setState(store.getState())
    }
    render(){
        return(
            <Fragment>
                <div>
                    <h3>我是child2</h3>
                    <span>{this.state.value}</span>
                </div>
            </Fragment>
        );
    }
}
export default Child2

5.创建一个父组件,在组件中引入上面的两个子组件

import React, { Fragment } from 'react'
import Child1 from '../child/Child1'
import Child2 from '../child/Child2'
import store from '../store'
import '../child/child.css'
class UseRedux extends React.Component{
    constructor(props){
        super(props);
        this.state = store.getState()
    }
    render(){
        return (<Fragment>
            <div>
                <div className="redux-title">
                    <h1>使用Redux</h1>
                </div>
                <div className="redux-child1">
                    <Child1></Child1>
                </div>
                <div className="redux-child2">
                    <Child2></Child2>
                </div>
                {/*  直接使用store中的默认值 */}
                {this.state.list.map((item, index)=>{
                    return <h5 key = {index}>{item}</h5>
                })}
            </div>
        </Fragment>);
    }
}
export default  UseRedux

6.结果

• 在子组件Child1的输入框输入的值,点击发送,就可以在子组件Child2中显示出来
• 在父组件中通过{this.state.list.map((item, index)=>{ return <h5 key = {index}>{item}</h5> })}可以直接将获取store中的默认值;