react redux 使用

2020-11-06 14:32:28 阅读：169 来源： 互联网

标签：redux return reducer react 使用 import counder

详情可查看github dome 演示文件 https://github.com/fuyunchun/react-redux-demo.git

index.js 入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'
import {Provider} from 'react-redux' 
import {createStore,applyMiddleware} from 'redux'
import {BrowserRouter} from 'react-router-dom'
import thunk from 'redux-thunk'; //处理异步的中间件，（和applyMiddleware一起使用）
import reducer from './reducer'

const store = createStore(reducer,applyMiddleware(thunk))

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
  ,document.getElementById('root')
);

app.js自定义组件

import React from 'react'
import {Link , Route} from 'react-router-dom'
import {connect} from 'react-redux'
import {ADD,REMOVE,ASYNC} from './counder'

function kehuan(){
    return <h1>《科幻类图书》</h1>
}

function xiaoshui(){
    return <h1>《小说类图书》</h1>
}

// 使用 @connect 需要安装redux装饰器，详情见下
https://www.cnblogs.com/tlfe/p/13930332.html

@connect(
    // state => ({num:state}), 没有合并reducer之前这么用
    state => ({num:state.counder}),
    {ADD,REMOVE,ASYNC}
)

class App extends React.Component{
    render(){
        return (
            <div>
                <ul>
                    <li>
                        <Link to="/">科幻类图书</Link>
                    </li>
                    <li>
                        <Link to="/xiaoshui">小说类图书</Link>
                    </li>
                </ul>
                <Route path="/" exact component={kehuan}></Route>
                <Route path="/xiaoshui" component={xiaoshui}></Route>
                <div>还剩{this.props.num}本图书</div>
                <button onClick={this.props.ADD.bind(this)}>申请图书</button>
                <button onClick={this.props.REMOVE.bind(this)}>上交图书</button>
                <button onClick={this.props.ASYNC}>缓两天在交</button>
            </div>
        )
    }
}

export default App

counder.js 文件

const add = '申请图书'
const remove = '上交图书'

function counder(state=0,action){
    switch(action.type){
        case add : return state + 1
        case remove : return state - 1
        default : return 10
    }
}

function ADD(){
    return {type:add}
}

function REMOVE(){
    return {type:remove}
}

// 处理异步的
function ASYNC(){
    return dispatch => {
        setTimeout(() => {
            dispatch(REMOVE())
        },2000)
    }
}

export {
    counder,
    ADD,
    REMOVE,
    ASYNC
}

reducer.js 合并多个reducer

// 合并多个 reducer

import {combineReducers} from 'redux'

import {counder} from './counder'  

// 有多少个直接在下面加
export default combineReducers({
    counder
})

标签：redux,return,reducer,react,使用,import,counder
来源： https://www.cnblogs.com/tlfe/p/13936691.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react redux 使用