如何使用Redux的核心store数据仓库(未完)_redux store的数据存在哪里-优快云博客

本文链接：https://blog.youkuaiyun.com/Front_ends/article/details/103364797

这篇博客详细介绍了如何一步步使用Redux建立核心的store数据仓库。从安装Redux开始，接着在src目录下创建store文件夹及index.js，然后编写reducer.js来管理数据。在index.js中引入并整合reducer，最后在Redux.js中初始化组件数据和设置reducer。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装Redux

cnpm install redux --save

2.安装完成之后在src文件夹下创建一个文件夹store，然后创建index.js文件夹

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

3.store为所有数据，需要一个reducer来管理数据，所以又在文件夹store创建reducer.js来管理数据的划分

const defaultState = {
//放入初始默认数据和其他数据
}  //默认数据
export default (state = defaultState,action)=>{  //就是一个方法函数
    return state
}

4.reducer.js文件的写好了，现在需要在index.js引入reducer，所以在index.js引入reducer

import reducer from './reducer'

5.再回来在store下的index.js引入数据仓库的数据reducer.js

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

6.下面开始初始化组件的数据了，就是在管理数据仓库的reducer.js里面写

const defaultState = {
		inputVal:'默认值'
}  //默认数据
export default (state = defaultState,action)=>{  //就是一个方法函数
    return state
}

7.写主键Redux.js

import React,{ Component,Fragment } from 'react';
import { Button, Card, Table, Modal, Input, Form } from 'antd';
import store from './store/index';
import 'antd/dist/antd.css';

class Redux extends Component{
    constructor(porps){
        super(porps)
        console.log(store.getState())       // 拿到数据仓库所暴露的store方法来获取公用数据
        this.state=store.getState()   //store.getState()就代替了曾经的对象只是放在公用仓库放着
    }
    render(){
        return(
            <Fragment>
                <Input  value={this.state.inputVal} onChange={this.hald} /><Button type="primary">添加</Button>
            </Fragment>
        )   
    }
}

export default Redux;       // 导出Redux