06.在项目中用react-redux进行应用数据管理

最新推荐文章于 2023-08-19 20:32:32 发布

zhuhui2000

最新推荐文章于 2023-08-19 20:32:32 发布

阅读量231

点赞数

分类专栏：简书项目

本文链接：https://blog.csdn.net/zhuhui2000/article/details/90697202

版权

简书项目专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文介绍了如何在项目中使用react-redux进行应用数据管理。步骤包括：安装redux和react-redux库，创建store和reducer，引入到App.js中，使用Provider组件包裹应用，连接Header组件与store，通过mapStateToProps和mapDispatchToProps处理数据传输，以及通过action更新store中的状态，实现数据管理。

摘要由CSDN通过智能技术生成

1.首先在终端安装redux和react-redux

yarn add redux

yarn add react-redux

安装好之后重启终端

npm start

2.在src目录下新建一个文件夹store，在store目录下新建两个文件:index.js,reducer.js
在这里插入图片描述
在index.js中：我们需要引入redux和reducer

import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;

在reducer.js中，接收action并将数据返回给index：

const defaultState = {};
export default (state=defaultState,action) => {
    return state;
}

3.在App.js中引入store和Provider

import { Provider } from 'react-redux';
import store from './store/index';

4.在原来<Header》标签的外部同一个Provider标签包裹，并将store数据引入，

return (
      //Provider把store里面的数据都提供给其内部的组件
      <Provider store={store}>
        <Header />
      </Provider>
    )

5.在Header文件下的index中，我们需要引入connect方法将Header与store连接起来做一个数据的传输
.

引入connect

import {connect} from 'react-redux';

如何连接？将export default Header;改为：

export default connect(mapStateToProps,mapDispathToProps)(Header);

添加两个方法：mapStateToProps，mapDispathToProps

//mapStateToProps：组件和store做连接的时候，store数据映射如何到props上
const mapStateToProps = (state)=>{
    return {
        //将store中的focused映射到组件里面
       focused: state.focused 
    }
}
//组件想要改变store的内容需要调用的方法
const mapDispathToProps = (dispath)=>{
    return{

    }
}

然后将reducer中的默认的state设置为focused
在index.js文件中，我们将原来的this.state={focused:false}删除，在mapStateToProps 中将store的数据与focused连接：
最后将this.state.focused全部修改为this.props.focused

6.将construct方法中的内容以及handleInputFocus和handleInputBlor两个部分代码都删除。现在需要通过向store发送请求修改focused的值。

首先给NavSearch绑定两个事件onFocus和onBlour
在mapDispathToProps中我们发送action请求：

const mapDispathToProps = (dispath)=>{
    return{
        handleInputFocus(){
            const action ={
                type:'search_focus'
            };
            dispath(action);
        },
        handleInputBlor() {
            const action = {
                type:'search_blor'
            };
            dispath(action);
        }
    }
    }

在reducer中，判断action的类型然后将其focused改变：

export default (state=defaultState,action) => {
    if (action.type === 'search_focus') {
        return {
            focused:true
        }
    };
    if (action.type === 'search_blor') {
        return {
            focused:false
        }
    }
    return state;
}

这样就实现了store数据管理了