理解Redux以及如何在專案中的使用

今天我們來聊聊redux，這篇文章是乙個高階的文章，建議大家先對redux的基礎有一定的了解，在這裡給大家推薦一下阮一峰老師的文章：

首先我們要知道我們為什麼要使用redux，我們在什麼情況下才需要去使用redux，在這裡引用redux的創造者的一句話："只有遇到 react 實在解決不了的問題，你才需要 redux 。"　

結合專案經驗說下我自己的理解：如果這批資料只是在乙個元件使用並且不需要和別的元件進行資料共享，從單一**獲取資料的時候，也就是說你的ui層很簡單，沒有複雜的資料流動，總之就是加入資料流動單項並且很簡易，沒有與伺服器的大量互動的情況下，我們不需要使用redux，否則只會讓我們的開發變得更加複雜。

那麼什麼時候我們需要用到redux呢：比如你的資料流動很複雜，這批資料有多個元件需要使用甚至別的頁面也需要使用它，或者說就是你的某些狀態需要在多個沒有強關聯的元件中用到，舉個很常見的例子，就比如說我們做登入儲存使用者資訊或者是做購物車的時候，我們就很有必要引入redux來幫我們做狀態管理了，總之，就是在你某些狀態或者資料的很難控制很難傳遞的時候，你需要redux來幫助你。

元件component通過actioncreators派發乙個行為action(注意在這裡是派發乙個扁平物件)，這個行為被派發到了store，store借助reducer確認該state的狀態並執行相應的操作，接下來reducer把新的state返回給store，最後store把這個state轉給了component。

import thunk from 'redux-thunk' //

可以讓dispatch傳的內容就不會侷限於只能傳乙個扁平物件了，就可以傳乙個函式了，關於redux-thunk的話後期我給大家寫乙個它原始碼的解析，最近太累了，感興趣的夥伴先自己查查

export

default store

import  from 'redux' //

為了可以引入多個reducer
//以下是偽**，只是模擬我們有多個reducer，我們可以把它們合併起來，互不影響
import from 'pages/first'import from 'pages/ticket'export 
default
combinereducers()

import  from 'react-redux'　　　　//你可以provider想象成乙個注入器，它可以幫我們把store注入到我們的根元件上，這樣的話store將無處不在

import store from './store'reactdom.render(
document.getelementbyid('root')
)

export const get_comment_data = 'ticket/get_comment_data'export const set_record_data = 'ticket/set_record_data'

const mapdispatch = (dispatch)=>

}}

const mapstate = (state) => 

}

正確的姿勢其實是這樣的：

import  from './actiontypes'export const loadcommentdataasync = (dispatch,id)=>)

.then(response =>response.json())
.then(result=>)})}
}

import  from './actiontypes'import  from './actiontypes'const defaultstate =,

records: 
}export 
default (state=defaultstate,action)=>
}if(action.type ===set_record_data)
}return
state
}

import reducer from './reducer'export 

這篇寫的不是很好，原諒我，最近很多事都堆在一起了，等我調整好了，這次的**就當成全是偽**來看，重在理解redux的流程以及它是如何在專案中進行使用的，理解它的用法即可，相信你看懂了以後在寫專案的時候會對它的理解會越來越深刻的，別看我**是怎麼寫的，就看看步驟就行了，我承認這次寫的很爛(:，等我調整好了給大家把注釋和解釋再完善完善，後期我會來修改它的

如何在專案中做出亮點

之前在群裡參加活動的同學，有不少說在小公司，被業務需求壓著。既然大家都說在做業務，那麼，正看到這裡的你，能不能5分鐘說明白，你負責的業務是什麼？這個問題我在活動群的github issue活動中，帶有業務理解標籤的題目裡經常會問到，可是大部分同學都沒有說到位，甚至答非所問。這裡談談我個人對業務的理解...

如何在Vue Element專案中配置國際化

vue i18n 1 建立i18n資料夾 在專案根目錄，即src目錄項建立i18n目錄，此目錄下用於存放多語言的翻譯如zh.js儲存中文翻譯,en.js儲存英文翻譯，id.js 儲存印尼語等。en.js export default zh.js export default 2 建立preset資料...

react專案中整合redux

npm install redux npm install react redux npm install redux thunk 生成store 在專案初始化預設index檔案中設定.index.js import from redux const store createstore fn 匯入r...