Шаги для использования Redux State Management:
- Store.js
- Reducers (RootReducer и другие)
- wrap app.js с поставщиком
- Добавить действия и типы
- Используйте Redux в компонентах с помощью метода Connect ().
Руководство для создания котловой пластины React-RETUX (с Redux-Thunk в качестве промежуточного программного обеспечения):
1. Установите Redux и необходимые библиотеки.
NPM I Redux React-Redux Redux-Thunk Redux-Devtools-Extension
- React Redux официальный Реагировать Связывание для Redux Анкет Это позволяет вашим компонентам React читать данные из магазина Redux и отправлять действия в хранилище для обновления данных.
- Redux Thunk : С помощью простого базового магазина Redux вы можете делать простые синхронные обновления, только отправив действие. Промежуточное программное обеспечение расширяет способности магазина и позволяет вам писать асинхронную логику, которая взаимодействует с магазином.
- Redux Devtools Extension : Чтобы обеспечить легкую отладку и путешествия во времени.
2. Создайте src/store.js.
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware)),
);
export default store;
3. Создать Reducers/index.js.
import { combineReducers } from 'redux';
export default combineReducers({});
4. Оберните все корневые компоненты – приложение с поставщиком.
import React from 'react';
import { Provider } from 'react-redux';
import store from '../store';
function App() {
return (
<>This is App Component
);
}
export default App;
5. Создать действия/types.js.
export const FETCH_POSTS = 'FETCH_POSTS'; export const NEW_POST = 'NEW_POST';
6. Создание действий/clientActions.js.
import { FETCH_POSTS, NEW_POST } from './types';
export const fetchPosts = () => dispatch => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(posts =>
dispatch({
type: FETCH_POSTS,
payload: posts
})
);
};
export const createPost = postData => dispatch => {
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(postData)
})
.then(res => res.json())
.then(post =>
dispatch({
type: NEW_POST,
payload: post
})
);
};
7. Создайте Reducer ./reducers/clientreducer.js.
import { FETCH_POSTS, NEW_POST } from '../actions/types';
const initialState = {
items: [],
item: {}
};
export default function(state = initialState, action) {
switch (action.type) {
case FETCH_POSTS:
return {
...state,
items: action.payload
};
case NEW_POST:
return {
...state,
item: action.payload
};
default:
return state;
}
}
8. Добавьте запись Reducer в корневой Reducer ./reducers/index.js.
import { combineReducers } from 'redux';
import clientReducer from './clientReducer';
export default combineReducers({
posts: clientReducer
});
9. Используйте Redux в компонентах.
src/components/post.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { fetchPosts } from '../../actions/clientActions';
class Posts extends Component {
componentWillMount() {
this.props.fetchPosts();
}
componentWillReceiveProps(nextProps) {
if (nextProps.newPost) {
this.props.posts.unshift(nextProps.newPost);
}
}
render() {
const postItems = this.props.posts.map(post => (
{post.title}
{post.body}
));
return (
Posts
{postItems}
);
}
}
Posts.propTypes = {
fetchPosts: PropTypes.func.isRequired,
posts: PropTypes.array.isRequired,
newPost: PropTypes.object
};
const mapStateToProps = state => ({
posts: state.posts.items,
newPost: state.posts.item
});
export default connect(mapStateToProps, { fetchPosts })(Posts);
src/components/postform.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createPost } from '../../actions/clientActions';
class PostForm extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
body: ''
};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
onSubmit(e) {
e.preventDefault();
const post = {
title: this.state.title,
body: this.state.body
};
this.props.createPost(post);
}
render() {
return (
Add Post
);
}
}
PostForm.propTypes = {
createPost: PropTypes.func.isRequired
};
export default connect(null, { createPost })(PostForm);
Обновите app.js
import React from 'react';
import Posts from './posts/Posts';
import PostForm from './posts/PostForm';
import { Provider } from 'react-redux';
import store from '../store';
function App() {
return (
);
}
export default App;
Если вы хотите код, вы можете найти его здесь:
- GitHub: https://github.com/yogeshdatir/React-Notes-and-Collections/tree/master/Redux/redux-boiler-plate
Вы можете найти меня здесь:
- Twitter: https://twitter.com/prophet_yashd
- GitHub: https://github.com/yogeshdatir
- LinkedIn: https://www.linkedin.com/in/yogeshdatir/
Увидимся!
Оригинал: “https://dev.to/yogeshdatir/react-redux-boiler-plate-39p9”