처음부터 나만의 redux 구축
redux 스토어를 연결하려고 하면 때때로 혼란스러운 반응 앱에 대한 상용구 설정을 수행해야 합니다.
그래서 처음부터 작성합니다.
반응 앱에서 store.js 파일을 생성합니다.
먼저 디스패치 함수, 구독 함수, 썽크 함수를 만들어야 합니다.
1.getState 함수는 앱의 현재 상태를 가져오는 데 도움이 됩니다.
2.thunk는 네트워크 요청을 지연시킬 수도 있는 aysnc 작업을 수행하는 데 사용됩니다.
reducers.js 파일 생성
<script id="gist-ltag"src="https://gist.github.com/saigowthamr/52f707d08c06a744cbf3df93e9b4c67e.js"/>
감속기
액션을 발송하면 이전 상태를 변경하는 대신 새로운 앱 상태를 제공합니다.
Redux를 React 앱에 연결하는 방법은 무엇입니까?
index.js 파일을 열고 스토어에서 구독을 가져오면 아래 코드에서 내가 한 것처럼 스토어에 연결됩니다.
import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import { subscribe } from './store';
subscribe(()=>render(
<App />,
document.getElementById("root")
))
이제 카운터와 할 일을 구현하고 redux가 올바르게 작동하는지 알 수 있도록 일부 네트워크 요청을 보내겠습니다.
todo.js 파일
<script id="gist-ltag"src="https://gist.github.com/saigowthamr/b923a643d6e9e674f810871a69c8a6e5.js"/>
위의 코드에서 먼저 getState를 가져오고 스토어에서 발송했습니다.
할 일 추가 버튼을 클릭하면 페이로드와 함께 작업 유형을 전달하고 getState는 스토어에서 추가된 할 일을 가져오는 데 도움이 됩니다.
counterbuttons.js 파일
import React from "react";
import {dispatch} from './store'
function Inc() {
dispatch({
type: 'INC'
})
}
function Dec() {
dispatch({
type: 'DEC'
})
}
const width = { width: '2rem' ,fontSize:'1.2rem'}
const CounterButtons= () => (
<div>
<button onClick={Inc} style={width} >+</button>
<button onClick={Dec} style={width} >-</button>
</div>
);
export default CounterButtons;
썽크를 사용하여 네트워크 요청을 보낼 때이며 썽크는 네트워크 요청을 만드는 데 사용됩니다.
thunks.js 파일 생성
import { dispatch, thunk } from "./store";
import axios from "axios";
export const users = () => thunk(
function (res) {
dispatch({
type: "GET_USERS",
users: res.data
});
}, (cb) => {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => cb(response))
.catch(err => cb({ err:'Error occurred'}))
},5000 //delay time
)
thunk 함수는 세 개의 인수를 사용합니다. 처음 두 개는 콜백 함수입니다. 마지막
인수는 지연이며 선택 사항입니다.
첫 번째 콜백 함수에서 작업 유형 및 페이로드와 함께 디스패치를 호출해야 합니다.
두 번째 콜백에서는 응답이 돌아올 때마다 네트워크 요청을 cb(callback) 함수로 감싸야 합니다. 첫 번째 콜백 함수 매개변수에서 응답을 받을 수 있습니다.
FetchData 구성요소
import React from "react";
import { getState } from "./store";
import { users } from "./thunks";
function Loading() {
return <h1 style={{ color: "red" }}>Loading</h1>;
}
class FetchData extends React.Component {
componentDidMount() {
users();
}
Users = () => {
if (getState().users) {
return getState().users.map(user => (
<ul key={user.id}>
<li>{user.name}</li>
<li>{user.email}</li>
</ul>
));
} else {
return <h1 style={{color:'red'}}>Delaying request for 5seconds</h1>;
}
};
render() {
return (
<div>
<ul>
<li>{getState().data ? getState().data : <Loading />}</li>
</ul>
<hr />
<h1>Users</h1>
<hr />
{this.Users()}
</div>
);
}
}
export default FetchData;
이것으로 모든 구성요소 생성이 완료되었습니다.
이제 앱이 이러한 구성 요소를 인식하지 못하므로 App.js 파일에서 이러한 구성 요소를 가져와야 합니다.
App.js 파일
<script id="gist-ltag"src="https://gist.github.com/saigowthamr/55a8097cffca4b1ff872df6282dbe4d9.js"/>
후 성공적으로 완료되었습니다
최종 출력
즐거우셨기를 바랍니다...👍🏻
코드 저장소
Reference
이 문제에 관하여(처음부터 나만의 redux 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sait/build-your-own-redux-from-scratch-5a4d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
