react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來

更新時(shí)間：2022年08月04日 14:12:21 作者：web前端 zxp

這篇文章主要介紹了react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

前景提要

如果不了解基礎(chǔ)的話 ----- 點(diǎn)擊此處

本文著重實(shí)現(xiàn)效果，不會(huì)講太多原理問題

未使用 react-redux 管理工具

1.創(chuàng)建倉(cāng)庫(kù)骨架并書寫初始代碼

src 目錄下創(chuàng)建

//store/index.js 代碼
import { createStore } from 'redux';
import reducer from "./reducer"
const store = createStore(reducer);
export default store

//store/reducer.js
const reducer = (prevState,action)=>{
    let newState = {...prevState}
    return newState
}
export default  reducer

2.正式開始

關(guān)鍵點(diǎn)在于 reducer.js 文件

它是一個(gè)純函數(shù)，在不修改原始值的情況下返回一個(gè)新的數(shù)據(jù)

現(xiàn)在我們返回一個(gè)新的數(shù)據(jù)給 store(倉(cāng)庫(kù))

//store/reducer.js
let state = {
    todos:[
        {
            id:1,
            title:"今天周一",
            isFinished:false
        },
        {
            id:2,
            title:"今天周二",
            isFinished:true
        }
    ]
}
const reducer = (prevState = state,action)=>{
    let newState = {...prevState}
    return newState   //將新的數(shù)據(jù)返回出去
}
export default  reducer

因?yàn)椴]有數(shù)據(jù)傳遞過來，所以我們用一個(gè)默認(rèn)的數(shù)據(jù)來代替，然后把它給一個(gè)新的數(shù)據(jù)再傳出去（store會(huì)自動(dòng)接收return 的數(shù)據(jù)）

3.store 數(shù)據(jù)獲取方法（可略過）

既然前文已經(jīng)返回?cái)?shù)據(jù)，那我們就看看返回來的數(shù)據(jù)的樣子

//在任意頁(yè)面（view）引入該store
import store from './store'
console.log("store====",store)

效果圖：

這是該 store 的方法

通過 getState()方法來獲取數(shù)據(jù)

import store from './store'
console.log(store.getState())

4.數(shù)據(jù)的獲取與展示

上文中通過 store.getState()獲取到了參數(shù)，那么我們就可以把獲取到的參數(shù)賦值給現(xiàn)在的組件的 state

import React, { Component } from 'react'
import store from '../store'    //引入
export default class One extends Component {
    constructor(){
        super()
        this.state = {
            todos:[]  //一定要定義一個(gè)初始值
        }
    }
    componentDidMount(){
        this.setState({
            todos:store.getState().todos   //將獲取到的數(shù)據(jù)里面的內(nèi)容賦值給 該頁(yè)面 state
            							   //頁(yè)面初次渲染的時(shí)候什么都沒有，在這里獲取并修改數(shù)據(jù)
            							   //使得頁(yè)面重新渲染，拿到數(shù)據(jù)
        })
    }
    render() {
        return (
            <div>
                {
                    this.state.todos.map(item=>{   //這里就是展示了
                        return(
                            <ul key={item.id}>
                                <li>{item.id}</li>
                                <li>{item.title}</li>
                            </ul>
                        )
                    })}
            </div>
        )
    }
}

效果圖：