React使用redux基礎操作詳解
更新時間：2023年01月13日 15:15:04 作者：web老猴子
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下
一，什么是redux
Redux是一個用來管理管理數(shù)據(jù)狀態(tài)和UI狀態(tài)的JavaScript應用工具。隨著JavaScript單頁應用（SPA）開發(fā)日趨復雜，JavaScript需要管理比任何時候都要多的state（狀態(tài)），Redux就是降低管理難度的。（Redux支持React，Angular、jQuery甚至純JavaScript） react-redux工作流程 安裝redux
npm install --save redux
簡單使用
在src下新建store文件夾，創(chuàng)建倉庫管理文件index.js
import { createStore, applyMiddleware, compose } from 'redux' // 引入createStore方法
import reducer from "./reducer"
const store = createStore(reducer) // 創(chuàng)建數(shù)據(jù)存儲倉庫
export default store //暴露出去
同時創(chuàng)建reducer.js文件
//定義初始state
const defaultState = {
inputValue: '請輸入待辦事項',
list: [
'早上4點起床，鍛煉身體',
'中午下班游泳一小時']
}
export default (state = defaultState, action) => {
return state
}
組件中使用state的值
import React, { Component } from 'react';
//組件中引入store
import store from './store'
class TodoList extends Component {
constructor(props) {
super(props)
#獲取store中state的值
this.state = store.getState();
this.clickBtn = this.clickBtn.bind(this)
?}
render() {
return (
<div>
<Input placeholder={this.state.inputValue} style={{ width: '250px', marginRight: '10px' }} value={this.state.inputValue} />
<Button type="primary" onClick={clickBtn}>增加</Button>
</div>
<div style={{ margin: '10px', width: '300px' }}>
<List bordered
dataSource={this.state.list}
renderItem={(item, index) => (<List.Item onClick={() => {
deleteItem(index)
}}>{item}</List.Item>)}></List>
</div>
);}deleteItem(index) {console.log(index)}
}
export default TodoList;
二，安裝redux谷歌調(diào)試工具
翻墻下載redux_dev_tool, 在store/index文件下添加
import { createStore, applyMiddleware, compose } from 'redux' // 引入createStore方法
import reducer from "./reducer"
//const composeEnhancers =
//const enhancers = composeEnhancers(applyMiddleware(thunk))
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION_ && window.__REDUX_DEVTOOLS_EXTENSION_()
) // 創(chuàng)建數(shù)據(jù)存儲倉庫,存在調(diào)試工具，開啟工具
export default store
三，操作store 改變
import React, { Component } from 'react';
//組件中引入store
import store from './store'
class TodoList extends Component {
constructor(props) {
super(props)
#獲取store中state的值
this.state = store.getState();
this.clickBtn = this.clickBtn.bind(this)this.changeInputValue = this.changeInputValue.bind(this)
#添加訂閱 #新版本不用添加訂閱 但是input value變化需要使用訂閱
store.subscribe(this.storeChange)
this.storeChange = this.storeChange.bind(this)}
render() {
return (
<div>
<Input placeholder={this.state.inputValue} style={{ width: '250px', marginRight: '10px' }} onChange={()=>{this.changeInputValue} value={this.state.inputValue} />
<Button type="primary" onClick={this.clickBtn}>增加</Button>
</div>
<div style={{ margin: '10px', width: '300px' }}>
<List bordered
dataSource={this.state.list}
renderItem={(item, index) => (
<List.Item onClick={() => {deleteItem(index)}}>{item}</List.Item>)}></List>
</div>
);}changeInputValue(e){//聲明action對象
const action ={
type:'changeInput',
value:e.target.value
}
//調(diào)用dispatch
store.dispatch(action)}
// 訂閱更新
storeChange() {
this.setState(store.getState())}// 添加按鈕事件clickBtn(){const action ={
type:'addItem',
}store.dispatch(action)}//點擊刪除事件deleteItem(index) {
const action = {
type:'deleteItem',
index
}
store.dispatch(action)}
}
export default TodoList;
在reducer.js中
//定義初始state
const defaultState = {
inputValue: '請輸入待辦事項',
list: [
'早上4點起床，鍛煉身體',
'中午下班游泳一小時']
}
export default (state = defaultState, action) => {
#reducer里只能接受state 不能改變state
if(action.type == 'changeInput'){
let newState = JSON.pares(JSON.stringify(state)) //深拷貝state
newState.inputValue = action.value
return newState}
//添加事件
if(action.type == 'addItem'){
let newState = JSON.pares(JSON.stringify(state)) //深拷貝state
newState.list.push(newState.inputValue)
newState.inputValue = '' //增加完成，設置為空
return newState}
//刪除事件
if(action.type == 'deleteItem'){
let newState = JSON.pares(JSON.stringify(state)) //深拷貝state
newState.list.splice(action.index,1)
return newState}
return state
}
四，寫redux的小技巧
在store中新建文件actionType.js
//定義常量 export const CHANGE_INPUT = 'changeInput' export const ADD_ITEM = 'addItem' export const DELETE_ITEM = 'deleteItem' export const GET_LIST = 'getList'
在組件中引入actionType文件
import React, { Component } from 'react';
//組件中引入store
import store from './store'
import { CHANGE_INPUT, ADD_ITEM, DELETE_ITEM, GET_LIST } from './store/actionType'
class TodoList extends Component {
constructor(props) {
super(props)
#獲取store中state的值
this.state = store.getState();
this.clickBtn = this.clickBtn.bind(this)this.changeInputValue = this.changeInputValue.bind(this)
#添加訂閱 #新版本不用添加訂閱 但是input value變化需要使用訂閱
store.subscribe(this.storeChange)
this.storeChange = this.storeChange.bind(this)}
render() {
return (
<div>
<Input placeholder={this.state.inputValue} style={{ width: '250px', marginRight: '10px' }} onChange={()=>{this.changeInputValue} value={this.state.inputValue} />
<Button type="primary" onClick={this.clickBtn}>增加</Button>
</div>
<div style={{ margin: '10px', width: '300px' }}>
<List bordered
dataSource={this.state.list}
renderItem={(item, index) => (
<List.Item onClick={() => {deleteItem(index)}}>{item}</List.Item>)}></List>
</div>
);}changeInputValue(e){//聲明action對象
#使用引入的常量替換
const action ={
type:CHANGE_INPUT,
value:e.target.value
}
//調(diào)用dispatch
store.dispatch(action)}
// 訂閱更新
storeChange() {
this.setState(store.getState())}// 添加按鈕事件clickBtn(){const action ={
type:ADD_ITEM,
}store.dispatch(action)}//點擊刪除事件deleteItem(index) {
const action = {
type:DELETE_ITEM,
index
}
store.dispatch(action)}
}
export default TodoList;
在reducer.js中也進行引入
import { CHANGE_INPUT, ADD_ITEM, DELETE_ITEM } from './actionType'
//定義初始state
const defaultState = {
inputValue: '請輸入待辦事項',
list: [
'早上4點起床，鍛煉身體',
'中午下班游泳一小時']
}
export default (state = defaultState, action) => {
#reducer里只能接受state 不能改變state
if(action.type == CHANGE_INPUT){
let newState = JSON.pares(JSON.stringify(state)) //深拷貝state
newState.inputValue = action.value
return newState}
//添加事件
if(action.type == ADD_ITEM){
let newState = JSON.pares(JSON.stringify(state)) //深拷貝state
newState.list.push(newState.inputValue)
newState.inputValue = '' //增加完成，設置為空
return newState}
//刪除事件
if(action.type == DELETE_ITEM){
let newState = JSON.pares(JSON.stringify(state)) //深拷貝state
newState.list.splice(action.index,1)
return newState}
return state
}
集中整理action派發(fā)
在store中新建actionCreator.js文件
import { CHANGE_INPUT, ADD_ITEM, DELETE_ITEM } from './actionType'
export const changeInputAction = (value) =>({type:CHANGE_INPUT,
value
})
export const addItemAction = () =>({type:ADD_ITEM,
})
export const deleteItemAction = (index) =>({type:DELETE_ITEM,
index
})
在組件中引入actionCreator.js
import React, { Component } from 'react';
//組件中引入store
import store from './store'
//引入actionCreator.js
import { changeInputAction,addItemAction,deleteItemAction } from './store/actionCreator'
class TodoList extends Component {
constructor(props) {
super(props)
#獲取store中state的值
this.state = store.getState();
this.clickBtn = this.clickBtn.bind(this)this.changeInputValue = this.changeInputValue.bind(this)
#添加訂閱 #新版本不用添加訂閱 但是input value變化需要使用訂閱
store.subscribe(this.storeChange)
this.storeChange = this.storeChange.bind(this)}
render() {
return (
<div>
<Input placeholder={this.state.inputValue} style={{ width: '250px', marginRight: '10px' }} onChange={()=>{this.changeInputValue} value={this.state.inputValue} />
<Button type="primary" onClick={this.clickBtn}>增加</Button>
</div>
<div style={{ margin: '10px', width: '300px' }}>
<List bordered
dataSource={this.state.list}
renderItem={(item, index) => (
<List.Item onClick={() => {deleteItem(index)}}>{item}</List.Item>)}></List>
</div>
);}changeInputValue(e){
const action = changeInputAction(e.target.value)
//調(diào)用dispatch
store.dispatch(action)}
// 訂閱更新
storeChange() {
this.setState(store.getState())}// 添加按鈕事件clickBtn(){const action =addItemAction()store.dispatch(action)}//點擊刪除事件deleteItem(index) {
const action = deleteItemAction(index)
store.dispatch(action)}
}
export default TodoList;
到此這篇關于React使用redux基礎操作詳解的文章就介紹到這了,更多相關React使用redux內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
可定制react18 input otp 一次性密碼輸入組件
這篇文章主要為大家介紹了可定制react18 input otp 一次性密碼輸入組件，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
ReactNative實現(xiàn)圖片上傳功能的示例代碼
本篇文章主要介紹了ReactNative實現(xiàn)圖片上傳功能的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-07-07
這篇文章主要介紹了React實現(xiàn)反向代理和修改打包后的目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
React Native中TabBarIOS的簡單使用方法示例
最近在學習過程中遇到了很多問題,TabBarIOS的使用就是一個，所以下面這篇文章主要給大家介紹了關于React Native中TabBarIOS簡單使用的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-10-10
這篇文章主要為大家詳細介紹了React元素的創(chuàng)建和渲染，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
React使用高德地圖的實現(xiàn)示例(react-amap)
這篇文章主要介紹了React使用高德地圖的實現(xiàn)示例(react-amap)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
在React項目中,我們經(jīng)常會使用到React自帶的幾個內(nèi)置Hooks，如 useState，useContext和useEffect。雖然在React中找不到這些 Hooks，但React提供了非常靈活的方式讓你為自己的需求來創(chuàng)建自己的自定義Hooks，想了解更多的，歡迎閱讀本文2023-04-04
這篇文章主要為大家介紹了python的函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
React Native按鈕Touchable系列組件使用教程示例
這篇文章主要為大家介紹了React Native按鈕Touchable系列組件使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要為大家詳細介紹了react中JSX的注意點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03