# Redux 基本概念2

## 使用React連結Redux

到19章先輸入`npm install`安裝package.json寫的模組

這章的幾個資料夾是延續我們上一張React的結構

之後安裝使用redux所需要的模組

```
npm install --save redux react-redux react-router-redux redux-logger
```

之後我們執行，然後看著程式碼進行講解

#### client.js

```
1.使用Provider包住router，之後元件使用connect即可獲得Redux store

2.syncHistoryWithStore讓瀏覽器的location同步到store中
```

![](/files/-M0u4R1SEdZsog8mEaFb)

![](/files/-M0u4R1UFNCuuBVnWkQA)

#### 元件中

```
1.使用connect把Redux的store與元件結合

export default connect((state) => state ,{ FilterTodo })(FliterLink)

//第一個參數，等同為把整個store的state訂閱了，如果store發生改變則此元件也會更新
//如果改為(state) => state.apple  則只會訂閱有關store中apple的部分，只有store 的apple更新了才會更新組件

//第二個參數是把action 轉為可以dispatch出去的function，之後即可使用this.props.FilterTodo即個發出action
//或是可寫this.props.dispatch(FilterTodo(this.props.filter));
//如果connect第二個參數沒寫，則dispatch會加入到this.props中即可使用上行所述去發出action
```

#### store

1\.

```
let finalCreateStore = compose(
    applyMiddleware(thunk,logger())
    )(createStore)
//用來加入一些middleware
```

2\.

```
let initialState = {
    visbility:'SHOW_ALL',
    todos:[{
        id:0,
        completed: false,
        text:'initial for demo'
    }]
}


function configureStore(initialState){
    return finalCreateStore(reducer,initialState)
}

//把初始的state與reducer做結合
```

3\.

```
let store = configureStore(initialState)

export default store

//最後輸出store
```

## 操作非同步動作(Async)

例如:

> 我們今天有一個按鈕，點擊後發出action去跟server要資料，回傳資料後再觸發一個action去更新state

### 使用Redux-thunk

`npm install redux-thunk`

將store.js改為

```
import {applyMiddleware,compose,createStore} from "redux"
import reducer from './reducer'
import logger from 'redux-logger'
import thunk from 'redux-thunk'

let initialState = {
  visbility:'SHOW_ALL',
  todos:[{
    id:0,
    completed: false,
    text:'initial for demo'
  }]
}


let finalCreateStore = compose(
applyMiddleware(thunk,logger())
)(createStore)

function configureStore(initialState){
return finalCreateStore(reducer,initialState)

}

let store = configureStore(initialState)

export default store
```

之後我們action.js裡面寫的方法不只可以return物件，還可以return function

這個function就是用來寫非同步API，最後拿回資料再寫return，之後即會送到reducer處理

例如:

```
FilterTodo:(filter) => {
  return({
    type:'SET_VISBILITY_FILTER',
    filter:filter
  })
},
///上面是一般的action，下面是thunk的action

con:() => {
  return (dispatch, getState)=>{
    console.log(getState())
  }
}
```

我們可以把action加上如下

```
    con:() => {
        return (dispatch, getState) => {
            console.log('現在的Store是');
            console.log(getState());
        }
  }
```

之後TodoList.js加入

```
 <button onClick={() => this.props.dispatch(action.con())}  />
```

## Redux Devtools

1.到chrome extension 下載Redux Devtools

<https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=zh-TW>

2.在程式的store.js中改為如下

```
let finalCreateStore = compose(
applyMiddleware(thunk,logger()),window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore)

function configureStore(initialState){
return finalCreateStore(reducer,initialState)

}

let store = configureStore(initialState)

export default store
```

3.開啟網頁即可看到chrome extension的redux devtools亮起，即可點選開啟

\--試著發出一些action然後點選最下方第七個時鐘圖案，即可看到他可以重播我們做過的action

\--也可點選chart去做查看

\--可點上方的做過的action的JUMP按鈕，之後可到當時的情況，但JUMP過去後不可再做改變，也就是點選畫面會沒反應，必須再JUMP回最新的action才能繼續對畫面做點選(原因是設計者要讓我們可以觀看過去但不可更改，否則後續的流程都會亂掉)

![](/files/-M0u4R1WYjhM4Q7aQ7Pl)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easonwang.gitbook.io/class/redux-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.