react中簡單使用redux

如果你一點不熟悉redux，看看這個

專案搭建好之後，安裝一下依賴，安裝一下redux 和 react-redux

在src目錄下建乙個redux資料夾，在redux資料夾下建action資料夾和reducer資料夾，分別放我們的action和reducer

1，首先編寫我們的action。 action 描述當前發生的事情，改變 state 的唯一辦法，就是使用 action ，它會運送資料到 store。在action資料夾下建乙個action.js檔案，寫的內容如下

export const type_one = 'type_one';
export const type_two = 'type_two';
export const type_alert = 'type_alert';
/*export function typeone(index) 
}export function typetwo(index) 
}*/export function typeone(dispatch,index) )
}export function typetwo(dispatch,index) )
}export function doalert(dispatch,text) )
}

這裡面，在建立函式的時候，把dispatch當做引數傳給了函式，在函式裡直接發起dispatch。dispatch接受乙個 action物件作為引數，將它傳送出去。

2，然後編寫我們的reducer。store收到 action以後，必須給出乙個新的 state，這樣 view 才會發生變化。這種 state 的計算過程就叫做 reducer。reducer是乙個函式，它接受 action和當前 state作為引數，返回乙個新的 state。

在reducer檔案中建了三個檔案，doalert.js、docounter.js 和 index.js。doalert和docounter是兩個reducer，index是將他倆合併在一起，當然你也可以在乙個檔案中寫多個reducer，只是reducer太多了就不好管理了，所以可以分開寫，最後再合併在一起。

doalert.js檔案如下：

import  from '../action/action';
export default function doalert(state = null, action) 
}

docounter.js檔案如下：

import  from '../action/action';
const defaultvalue=;
export default function docounter(state = defaultvalue, action) ,state,);
case type_two:
return object.assign({},state,);
default:
return state;
}}

index.js檔案如下：

import docounter from './docounter';
import doalert from './doalert';
import from 'redux'
export default combinereducers()

這裡使用redux提供的combinereducers方法來合併多個reducer，然後丟擲。

3，我們需要在入口的js檔案中建立store並在全域性繫結store，src下的index.js檔案修改如下：

import '@/css/pub.css';
import 'antd/lib/index.css';
import react from 'react';
import reactdom from 'react-dom';
import from 'react-redux'
import routes from './router/router.js';
import from 'redux';
import counter from 'src/redux/reducer/index'
import from 'react-router-dom'
import history from 'src/history/index'
const store = createstore(counter);
reactdom.render(
, document.getelementbyid('root')
);

這裡面使用到了react-redux的provider標籤和 redux的createstore方法，createstore用來建立store，引數我們的reducer，最後在provider標籤上全域性繫結store。

4，下面就是如何使用了，建了乙個counter.js的檔案，如下：

import react,  from 'react';
import from 'react-redux';
import from 'src/redux/action/action'
class counter extends component 
increment(index)
decrement(index)
doalert(text)
render() = this.props;
let text = this.props.text ? this.props.text : '點我alert';
return (
clicked: 次  
}>點我+  
}>點我-  
}>  )}
}export default connect(
state => ()
)(counter)

使用的時候，要引入react-redux的connect方法，同時引入我們定義好的action方法。

在最後丟擲頁面的時候必須使用connect方法連線，connect的寫法有多種，具體可以自己去看一下文件。在頁面呼叫我們寫好的action方法就可以改變state中的值了，頁面也會重新渲染了。

react中簡單使用redux

react中redux的使用

react 中的redux的使用

React使用Redux管理資料

react中簡單使用redux

react中redux的使用

react 中的redux的使用

React使用Redux管理資料

相關推薦