共計 4145 個字符，預計需要花費 11 分鐘才能閱讀完成。
這篇文章主要介紹“怎么在 React 項目中使用 Redux”，在日常操作中，相信很多人在怎么在 React 項目中使用 Redux 問題上存在疑惑，丸趣 TV 小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在 React 項目中使用 Redux”的疑惑有所幫助！接下來，請跟著丸趣 TV 小編一起來學習吧！
首先我們會用到哪些框架和工具呢？ React UI 框架 Redux 狀態管理工具，與 React 沒有任何關系，其他 UI 框架也可以使用 Redux react-redux React 插件，作用：方便在 React 項目中使用 Redux react-thunk 中間件，作用：支持異步 action
|--src
|-- store Redux 目錄
|-- actions.js
|-- index.js
|-- reducers.js
|-- state.js
|-- components 組件目錄
|-- Test.jsx
|-- App.js 項目入口 準備工作 第 1 步：提供默認值，既然用 Redux 來管理數據，那么數據就一定要有默認值，所以我們將 state 的默認值統一放置在 state.js 文件:
// state.js// 聲明默認值 // 這里我們列舉兩個示例 // 同步數據：pageTitle// 異步數據：infoList（將來用異步接口獲取）export default { pageTitle: 首頁 , infoList: []
}第 2 步：創建 reducer，它就是將來真正要用到的數據，我們將其統一放置在 reducers.js 文件
// reducers.js// 工具函數，用于組織多個 reducer，并返回 reducer 集合 import { combineReducers } from redux // 默認值 import defaultState from ./state.js // 一個 reducer 就是一個函數 function pageTitle (state = defaultState.pageTitle, action) { // 不同的 action 有不同的處理邏輯
switch (action.type) { case SET_PAGE_TITLE : return action.data default: return state
}
}function infoList (state = defaultState.infoList, action) { switch (action.type) { case SET_INFO_LIST : return action.data default: return state
}
}// 導出所有 reducerexport default combineReducers({
pageTitle,
infoList// 歡迎加入全棧開發交流圈一起學習交流：864305860})// 面向 1 - 3 年前端人員 // 幫助突破技術瓶頸，提升思維能力 第 3 步：創建 action，現在我們已經創建了 reducer，但是還沒有對應的 action 來操作它們，所以接下來就來編寫 action
// actions.js// action 也是函數 export function setPageTitle (data) { return (dispatch, getState) = { dispatch({ type: SET_PAGE_TITLE , data: data })
}
}export function setInfoList (data) { return (dispatch, getState) = { // 使用 fetch 實現異步請求
window.fetch( /api/getInfoList , { method: GET , headers: { Content-Type : application/json
}
}).then(res = { return res.json()
}).then(data = { let { code, data } = data if (code === 0) { dispatch({ type: SET_INFO_LIST , data: data })
}
})
}
}最后一步：創建 store 實例
// index.js// applyMiddleware: redux 通過該函數來使用中間件 // createStore: 用于創建 store 實例 import { applyMiddleware, createStore } from redux // 中間件，作用：如果不使用該中間件，當我們 dispatch 一個 action 時，需要給 dispatch 函數傳入 action 對象；但如果我們使用了這個中間件，那么就可以傳入一個函數，這個函數接收兩個參數:dispatch 和 getState。這個 dispatch 可以在將來的異步請求完成后使用，對于異步 action 很有用 import thunk from redux-thunk // 引入 reducerimport reducers from ./reducers.js // 創建 store 實例 let store = createStore(
reducers,
applyMiddleware(thunk)
)export default store至此，我們已經完成了所有使用 Redux 的準備工作，接下來就在 React 組件中使用 Redux
開始使用 首先，我們來編寫應用的入口文件 APP.js
// App.jsimport React from react import ReactDOM from react-dom // 引入組件 import TestComponent from ./components/Test.jsx // Provider 是 react-redux 兩個核心工具之一，作用：將 store 傳遞到每個項目中的組件中 // 第二個工具是 connect，稍后會作介紹 import { Provider } from react-redux // 引入創建好的 store 實例 import store from @/store/index.js // 渲染 DOMReactDOM.render (
( div
{/* 將 store 作為 prop 傳入，即可使應用中的所有組件使用 store */} Provider store = {store}
TestComponent /
/Provider
/div
), document.getElementById(root)
)最后是我們的組件：Test.jsx
// Test.jsximport React, { Component } from react // connect 方法的作用：將額外的 props 傳遞給組件，并返回新的組件，組件在該過程中不會受到影響 import { connect } from react-redux // 引入 actionimport { setPageTitle, setInfoList } from ../store/actions.js class Test extends Component { constructor(props) { super(props)
}
componentDidMount () { let { setPageTitle, setInfoList } = this.props
// 觸發 setPageTitle action
setPageTitle(新的標題)
// 觸發 setInfoList action
setInfoList()
}
render () { // 從 props 中解構 store
let { pageTitle, infoList } = this.props
// 使用 store
return ( div
h2 {pageTitle} /h2
{
infoList.length 0 ? ( ul
{ infoList.map((item, index) = { li {item.data} /li
})
} /ul
):null
} /div
)
}
}// mapStateToProps：將 state 映射到組件的 props 中 const mapStateToProps = (state) = { return { pageTitle: state.pageTitle, infoList: state.infoList
}
}// mapDispatchToProps：將 dispatch 映射到組件的 props 中 const mapDispatchToProps = (dispatch, ownProps) = { return { setPageTitle (data) { // 如果不懂這里的邏輯可查看前面對 redux-thunk 的介紹
dispatch(setPageTitle(data)) // 執行 setPageTitle 會返回一個函數
// 這正是 redux-thunk 的所用之處: 異步 action
// 上行代碼相當于
/*dispatch((dispatch, getState) = { dispatch({ type: SET_PAGE_TITLE , data: data })
)*/
},
setInfoList (data) { dispatch(setInfoList(data))
}
}
}export default connect(mapStateToProps, mapDispatchToProps)(Test)到此，關于“怎么在 React 項目中使用 Redux”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注丸趣 TV 網站，丸趣 TV 小編會繼續努力為大家帶來更多實用的文章！
