如何優雅地在React專案中使用Redux

首先我們會用到哪些框架和工具呢？

ui框架

狀態管理工具，與react沒有任何關係，其他ui框架也可以使用redux

react外掛程式，作用：方便在react專案中使用redux

中介軟體，作用：支援非同步action

tips：與redux無關的目錄已省略

|--src

|-- store redux目錄
|-- actions.js
|-- index.js
|-- reducers.js
|-- state.js
|-- components 元件目錄
|-- test.jsx

// state.js

// 宣告預設值
// 這裡我們列舉兩個示例
// 同步資料：pagetitle
// 非同步資料：infolist（將來用非同步介面獲取）
export default

// reducers.js

// 工具函式，用於組織多個reducer，並返回reducer集合
import from 'redux'
// 預設值
import defaultstate from './state.js'
// 乙個reducer就是乙個函式
function
pagetitle
(state = defaultstate.pagetitle, action) 
}function
infolist
(state = defaultstate.infolist, action) 
}// 匯出所有reducer
export default combinereducers()

// actions.js

// action也是函式
export function
setpagetitle
(data) )
}}export function
setinfolist
(data) 
}).then(res => ).then(data => = data
if (code === 0) )}})
}}

// index.js

// createstore: 用於建立store例項
// 中介軟體，作用：如果不使用該中介軟體，當我們dispatch乙個action時，需要給dispatch函式傳入action物件；但如果我們使用了這個中介軟體，那麼就可以傳入乙個函式，這個函式接收兩個引數:dispatch和getstate。這個dispatch可以在將來的非同步請求完成後使用，對於非同步action很有用
import thunk from 'redux-thunk'
// 引入reducer
import reducers from './reducers.js'
// 建立store例項
let store = createstore(
reducers,
)export default store

import react from 'react'

import reactdom from 'react-dom'
// 引入元件
import testcomponent from './components/test.jsx'
// provider是react-redux兩個核心工具之一，作用：將store傳遞到每個專案中的元件中
// 第二個工具是connect，稍後會作介紹
import from 'react-redux'
// 引入建立好的store例項
import store from '@/store/index.js'
// 渲染dom
reactdom.render (
( 
store = >
provider>
div>
),document.getelementbyid('root')
)

// test.jsx

import react, from 'react'
// connect方法的作用：將額外的props傳遞給元件，並返回新的元件，元件在該過程中不會受到影響
import from 'react-redux'
// 引入action
import from '../store/actions.js'
class test extends component 
componentdidmount () = this.props
// 觸發setpagetitle action
setpagetitle('新的標題')
// 觸發setinfolist action
setinfolist()
} render () = this.props
// 使用store
return (
h1>
li>})}
ul>
):null
}div>)}}
// mapstatetoprops：將state對映到元件的props中
const mapstatetoprops = (state) => 
}// mapdispatchtoprops：將dispatch對映到元件的props中
const mapdispatchtoprops = (dispatch, ownprops) => )
)*/},
setinfolist (data) 
}}export default connect(mapstatetoprops, mapdispatchtoprops)(test)

原文出處：如何優雅地在react專案中使用redux

優雅的在React專案中使用Redux

首先我們會用到哪些框架和工具呢？reactui框架redux狀態管理工具，與react沒有任何關係，其他ui框架也可以使用reduxreact reduxreact外掛程式，作用 方便在react專案中使用reduxreact thunk中介軟體，作用 支援非同步action src store r...

優雅的在React專案中使用Redux

首先我們會用到哪些框架和工具呢？ui框架 狀態管理工具，與react沒有任何關係，其他ui框架也可以使用redux react外掛程式，作用 方便在react專案中使用redux 中介軟體，作用 支援非同步action tips 與redux無關的目錄已省略 src store redux目錄 ac...

優雅的在React專案中使用Redux

或許你當前的專案還沒有到應用redux的程度，但提前了解一下也沒有壞處首先我們會用到哪些框架和工具呢？react ui框架 redux 狀態管理工具，與react沒有任何關係，其他ui框架也可以使用redux react redux react外掛程式，作用 方便在react專案中使用redux r...