當我們創建了react項目之後 並安裝了redux （我習慣用yarn安裝 yarn add redux ）
瞭解一下 redux 狀態管理工具
redux 三大原則
1-1 單一數據源（store是唯一的）
1-2 State是隻讀的（一旦修改就會產生新的狀態）
1-3 使用純函數來執行修改（同樣的輸入必定得到同樣的輸出。不能改變參數）
首先 在創建項目之後 的 src文件夾下創建store文件夾作爲倉庫，建立 index.js根文件
import { createStore } from 'redux' //引入createStore
import reducer from './reducer'// reducer是修改狀態的純函數 在外部創建一個純函數的reducer.js文件,引入進來
var store = createStore(reducer);// 把reducer傳遞賦值給store
export default store;// 導出store
1-5 reducer.js文件 —rxd快捷樣式
大致內容是
const initState = {
value: 1 //這裏是存數據的地方
}
export default (state = initState, { type, payload }) => {
switch (type) {
//這個位置是改變數據的地方 ，暫時先不說，先看看怎麼存取。後期補上怎麼改變數據。
// case “TYPENAME”:
// return { …state, …payload }//修改數據
default:
return state
}
}
1-6 在src文件夾下建立One文件夾下在建一個一個組件 index.js 並引入到App組件中 ，渲染
在one組件中的index.js中
進行取數據
操作如下
import React, { Component } from ‘react’
import store from ‘…/…/store’
export default class One extends Component {
constructor(props) {
super(props)
this.state = {
value: store.getState().value ///這個地方就是取數據 也就是通過 getState取數據
}
}
render() {
return (
One組件
{this.state.value} //取數據之後進行渲染
)
}
}