react-redux

React-redux

2018/8/30
2021/01/23(新增連結)

簡介

當我們的介面需要根據使用者的各種選擇(例如，選擇某個類型的內容)來客製畫面及對應動作時，單純的react很難處理，程式碼也不容易看得懂，這時候，就需要利用redux (詳參: When to use Redux 或 A Beginners Guide to Redux)

Basics (redux.js.org)
- sample code from redux.js.org
  - source code for counter (基礎的react-redux)
  - source code for to do list

開一個新目錄，將source code for to do list的內容下載下來 (跟網頁上描述的內容不太一樣)，含package.json及src及public內的所有檔案，執行

npm install

npm會依照package.json的內容，安裝所需要的packages (詳參: 史上最強套件管理 - NPM ， npm init 與 npm install (Day11))

執行

npm run start

就可以執行程式了，那我們來看一下這個簡單的react-redux範例，從index.js開始，跟一般react的index.js不一樣的是createStore、Provider跟rootReducer。Provider是react跟redux的連接者，Provider利用store跟redux連接起來，這樣子才能讓react可以透過store跟redux溝通。App的部份就是react的內容，後面我們再來看一下那個部份。

import React from 'react'

import { render } from 'react-dom'

import { createStore } from 'redux'

import { Provider } from 'react-redux'

import App from './components/App'

import rootReducer from './reducers'

const store = createStore(rootReducer)

render(

<Provider store={store}>

<App />

</Provider>,

document.getElementById('root')

)

看一下./src/store/index.js，這裡設定./src/reducers/index.js為啟動的reducer

import { createStore } from "redux";

import rootReducer from "../reducers/index";

const store = createStore(rootReducer);

export default store;

看一下./src/reducers/index.js，可以看到這邊利用combineReducer包含了兩個reducer:todos跟visibilityFilter

import { combineReducers } from 'redux'

import todos from './todos'

import visibilityFilter from './visibilityFilter'

export default combineReducers({

todos,

visibilityFilter

})

看一下react的部份，react的部份寫在App裡，我們看一下./src/components/App.js，這裡面包括三個react的元件: Footer、AddToDo及VisibleTodoList。

import React from 'react'

import Footer from './Footer'

import AddTodo from '../containers/AddTodo'

import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (

<div>

<AddTodo />

<VisibleTodoList />

<Footer />

</div>

)

export default App

看一下./src/containers/AddTodo.js，這邊包括一個 form，form裡有一個input及button，button是個submit button，按下去之後會呼叫form的onSubmit。在這裡利用dispatch呼叫addTodo (action)，將input裡的資料傳過去。

import React from 'react'

import { connect } from 'react-redux'

import { addTodo } from '../actions'

const AddTodo = ({ dispatch }) => {

let input

return (

<div>

<form onSubmit={e => {

e.preventDefault()

if (!input.value.trim()) {

return

}

dispatch(addTodo(input.value))

input.value = ''

}}>

<input ref={node => input = node} />

Add Todo

</button>

</form>

</div>

)

}

export default connect()(AddTodo)

看一下./src/containers/VisibleTodoList的內容，內容會有三種狀況，當filter的狀態為SHOW_ALL就回傳todos的所有內容，當filter的狀態為SHOW_COMPLETED就回傳設為completed的todos，當filter的狀態為SHOW_ACTIVE就回傳沒被設為completed的todos。

import { connect } from 'react-redux'

import { toggleTodo } from '../actions'

import TodoList from '../components/TodoList'

import { VisibilityFilters } from '../actions'

const getVisibleTodos = (todos, filter) => {

switch (filter) {

case VisibilityFilters.SHOW_ALL:

return todos

case VisibilityFilters.SHOW_COMPLETED:

return todos.filter(t => t.completed)

case VisibilityFilters.SHOW_ACTIVE:

return todos.filter(t => !t.completed)

default:

throw new Error('Unknown filter: ' + filter)

}

const mapStateToProps = state => ({

todos: getVisibleTodos(state.todos, state.visibilityFilter)

})

const mapDispatchToProps = dispatch => ({

toggleTodo: id => dispatch(toggleTodo(id))

})

export default connect(

mapStateToProps,

mapDispatchToProps

)(TodoList)

VisibleTodoList包括TodoList，看一下./src/components/TodoList.js，TodoList是一個unordered list，每一個被按下的時候，會呼叫toggleTodo。

import React from 'react'

import PropTypes from 'prop-types'

import Todo from './Todo'

const TodoList = ({ todos, toggleTodo }) => (

<ul>

{todos.map(todo =>

<Todo

key={todo.id}

{...todo}

onClick={() => toggleTodo(todo.id)}

)}

</ul>

)

TodoList.propTypes = {

todos: PropTypes.arrayOf(PropTypes.shape({

id: PropTypes.number.isRequired,

completed: PropTypes.bool.isRequired,

text: PropTypes.string.isRequired

}).isRequired).isRequired,

toggleTodo: PropTypes.func.isRequired

}

export default TodoList

看一下./src/components.Footer.js的內容，最前面是文字「Show:」接下來是三個FilterLink: 「All」、「Active」、「Completed」

import React from 'react'

import FilterLink from '../containers/FilterLink'

import { VisibilityFilters } from '../actions'

const Footer = () => (

<div>

All

</FilterLink>

Active

</FilterLink>

Completed

</FilterLink>

</div>

)

export default Footer

待續...

參考書目

Report abuse