taro 中 redux 的使用

2022-06-30 02:18:13 字數 1231 閱讀 4641

官方教程:

首先需要先按照官方文件 安裝好redux@tarojs/redux@tarojs/redux-h5

這裡我是以我使用的attabbar底部導航作為乙個例項 如果需要使用可以安裝 taro-ui 後引入使用

在 \src\reducers\index.ts

中引入並註冊我們需要新增的reducer處理

import  from 'redux'import bottonmenu from './bottonmenu'export 

default

combinereducers()

建立 在同級目錄建立 我們的 bottonmenu.ts 檔案

bottonmenu 檔案中需要先定義好乙個常量 然後寫入相關操作方法

const menu_state=

export

default

function bottonmenu(prestate=menu_state,action);

default

:

return

; }

}

建立 \src\actions\bottonmenu.ts檔案 新增action處理

//

跳轉後底部選單選中

export function

bottonmenu(num))

}}

然後在我們需要使用的頁面/元件中 引入bottonmenu.ts 並新增@connect

import  from '../../actions/bottonmenu'@connect(

function

(store)

},function

(dispatch)}

})

並且這裡需要注意@connect是在我們元件或是頁面的 class 外面的

下面在需要使用的地方呼叫tomenu方法即可

handleclick (value)

在attabbar元件中使用 this.props.num 就能拿到

tablist=,,,

]}onclick=

current=

/>

react中redux的使用

1.安裝redux npm install redux 2.store的建立 src store index.js import from redux import reducer from reducer const store createstore reducer src store redu...

react 中的redux的使用

在專案中安裝redux yarn add redux yarn add react redux 首先建立乙個store資料夾 在store資料夾中建立乙個index.js檔案 在index.js中建立乙個例項 import from redux const state createstore exp...

react中簡單使用redux

如果你一點不熟悉redux,看看這個 專案搭建好之後,安裝一下依賴,安裝一下redux 和 react redux 在src目錄下建乙個redux資料夾,在redux資料夾下建action資料夾和reducer資料夾,分別放我們的action和reducer 1,首先編寫我們的action。acti...