技術標籤：react

元件中是如何使用redux

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

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

上面是使用redux入口必寫的模板程式碼，再通過connect方法把容器元件和展示元件關聯，使得在元件中使用redux十分的方便。但是突然說要在普通js檔案中使用就有點悶逼了。其實一樣的，只是是用的最原始的redux的使用方法.

普通js檔案中使用

1. 在你宣告store的地方匯出store

const store = createStore(todoApp, applyMiddleware(thunk))
ReactDOM.render((
        <Provider store={store}>
            <App/>
        </Provider>
    ),
    document.getElementById('root')
)
export {store} //匯出store

2. 在普通js檔案中引入store

import {store} from "../index";
import {addTodo} from "../redux/actions";

function normalJs (props) {
    console.log('普通js檔案');
    console.log('store',store);
    console.log('store.getState',store.getState());
    store.dispatch(addTodo('通js檔案aaaa'))
}
export {normalJs}
 

3.介面上呼叫測試

<button onClick={()=>{normalJs()}}>呼叫普通js檔案中的方法</button>

4.結果

和你展示元件通過connect從容器元件中獲取的action是一個效果

store下有這兩個常用的方法

• dispatch 呼叫action更新資料
• getState 獲取資料

具體文件地址點此檢視

最原始的redux是怎麼用的

1. 最原始既要自己監聽，app入口直接把store當屬性進行傳遞

/*index.js*/
const store=createStore(counter) //內部會第一次呼叫reducer函式獲得初始state

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

//訂閱監聽（store中的狀態變化了，就會呼叫進行重繪）
store.subscribe(()=>{
    ReactDOM.render((<App store={store}/>), document.getElementById('root'))
})
 

2. 更新值，獲取值

/*App.js*/
省略...
	//更新值
	addNum=()=>{
        //呼叫Store的dispatch去更新狀態
        //action也沒單獨寫，引數直接是原始的它要的物件
        this.props.store.dispatch({type:'INCREMENT',data:1})
    }
省略...
	render() {
		//拿值
		//自己通過屬性傳遞的store呼叫getState方法獲取值
        const count=this.props.store.getState()
	}

這是最原始時候的用法了，把通過屬性傳遞的store匯出給普通js檔案用不是一個道理嗎,很長時間沒用dispatch和getstate都差點忘記了這倆最基本的方法了。現在都是自動幫你dispatch和獲取值。